WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Not working, but was! (I think) (10 posts)

  1. jdlyery
    Member
    Posted 2 years ago #

    I could swear I had the plugin working with some inline content, but now it is not. Hmmm...

    Could you take a look please?

    Here

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Hi, looking at your source code, I see the jquery library is loaded twice. This one, near the end of the <head> section, needs to be removed:

    <!--Scripts for jQueryExpand-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    ...

    It's probably in your header.php theme template file.

  3. jdlyery
    Member
    Posted 2 years ago #

    Tried deleting that and it works on the test page.

    On the actual page that I'm implementing it on, it does not. I have a jQuery Expand area, and it kills that + the Fancybox does not work.

    Refresh the same link to see - I have made a duplicate page of the 'live page so I can delete it later - strangely, the FB part works on this duplicate page - otherwise all exactly the same - but FB does not work on the live page. In any case FB is killing the Expand.

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    I'm not clear on where you say it does work and where not. Refreshing the page linked from the first thread post, I see you are still loading two versions of the jQuery library. Plus you are loading thickbox in the footer, which might also conflict with fancybox...

    Another thing that might be completely messing up the DOM tree, preventing FancyBox from working in certain browsers is the fact that the source starts like

    <style type="text/css">
    <!--
    table tr td.fix { border: none; font-size:12px}
    td.fix { border: none; }
    tr.fix { border: none; }
    
    table{border: none}
    table tr th{font-size: 12px;}
    table tr td{padding: 16px; border: none}
    table tr td.gray{background: #efefef;}
    
    -->
    </style>
    
    <body class="training">
    
    <!DOCTYPE html>
    ...

    Make sure your themes source ALWAYS starts with the DOCTYPE declaration (on the FIRST line, even blank lines might cause problems on certain browsers!) and then continue with the basic nested DOM structure like

    <!DOCTYPE html>
    <html>
      <head>
      ...
      </head>
      <body>
      ...
      </body>
    </html>

    Anything diverting from that, will give unexpected results...

  5. jdlyery
    Member
    Posted 2 years ago #

    Sorry, I had enabled the jQuery call in the header just to make the expand work again. I re-posted with it off so you can see it now. I also removed the css at the top.

    As you should see, the FB works now, but te expand function is NOT working. Some conflict?

  6. jdlyery
    Member
    Posted 2 years ago #

  7. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Apart from what I wrote earlier (about valid markup) there are several other issues:

    1. the jQuery library included in WP is using no-conflict mode. This means you need to adapt the expand call from

    $(function() {
        $("#demo1 h3.expand").toggler();
        $("#demo2 h3.expand").toggler({initShow: "div.collapse:eq(0)"});
    
        $("#demo1").expandAll({
          trigger: "h3.expand",
          ref: "h3.expand",
          showMethod: "slideDown",
          hideMethod: "slideUp"
        });
    
    });

    to

    jQuery(document).ready(function($) {
        $("#demo1 h3.expand").toggler();
        $("#demo2 h3.expand").toggler({initShow: "div.collapse:eq(0)"});
    
        $("#demo1").expandAll({
          trigger: "h3.expand",
          ref: "h3.expand",
          showMethod: "slideDown",
          hideMethod: "slideUp"
        });
    
    });

    (only the first line is different)

    Alternatively, you can use a plugin like http://wordpress.org/extend/plugins/use-google-libraries/ that forces WP to call the Google hosted jQuery library.

    2. The script file http://www.luckymedia.com/clients/Linus/content/wp-content/themes/linusgroup_v2/js/videos.js is called before the jQuery library is loaded. You need to move that down and also adapt the content to adhere to the no-conflict rules similarly as described at point 1...

  8. jdlyery
    Member
    Posted 2 years ago #

    How can I contact you offline? I nee some help ;-)

  9. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    You can always contact me via my website... Try the form on http://4visions.nl/en/contact/ if I'm not online ;)

  10. jdlyery
    Member
    Posted 2 years ago #

    Thanks. I got it working! Thanks for the help. I may contact you about another issue - not related to your great plugin! ;-)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic