• Resolved Alain Lankers

    (@alain-lankers)


    I am using Easy FancyBox with NextGen Gallery and it’s working fine with Twenty Eleven theme. When I switch to my own theme the Easy FancyBox is not working anymore and is showing just a little white square. I checked everything on https://www.ads-software.com/extend/plugins/easy-fancybox/other_notes/ Everything noted here is ok. I can’t figure out what my theme is missing. I am having <?php wp_head(); ?> in header.php and <?php wp_footer(); ?> in footer.php.
    Any ideas are welcome. This is my page: https://bit.ly/RWrm5H

Viewing 15 replies - 1 through 15 (of 15 total)
  • Thread Starter Alain Lankers

    (@alain-lankers)

    It seems the problem was with hardcoded jquery library. Removing the link to the library solved the problem.

    reneequinn

    (@reneequinn)

    Hey Alain – I’m having exactly the same problem – driving me crazy!

    I’ve removed any hardcoded jquery links from my header and Easy Fancybox is the only other item using jquery in the site.

    Is there another hardcoded jquery link somewhere that I should try removing?

    Hi Alain, thanks for sharing that ??

    Hi Renee, it can be a double loading jQuery library like in Alain’s case but it can also be another double or even missing script file. Do you have a link to your site so I can take a look?

    bowenac

    (@bowenac)

    I am having this problem as well, but I need the hardcoded jquery for nivoslider to work. Is there a way around this I prefer elastic rather than fade…

    @bowenac, why would you need a hard-coded jQuery? Does the version provided by WordPress not work with NivoSlider?

    No doesn’t seem to work if I remove it then the slider disappears.

    @renee, there might be a hidden jQuery library included in some other theme script file… However, a link to your site will be more helpful than any speculations ??

    @bowenac, is this in your theme or another plugin? It might be a case of script file load order but same as for @renee: a link will be helpful ??

    I think it is the order of the scripts… I have similar problems outside of wordpress on sites that did not use wordpress and it was always the order which they loaded. But for this all other effects and “lightbox” variations work. It seems it would be more related to the elastic in this plugin since other variations work. Should I pm you the link?

    Here is a site I am working on, that has this same problem. The script for nivo is at the bottom of the header, and I have it loading the script in the footer…

    https://www.adamcbowen.com/BlueSteel/

    What exactly on that site is not working? The only error I see is https://www.adamcbowen.com/BlueSteel/wp-content/themes/pnw-design/nivo-slider/themes/orman/orman.css returning a 404…

    Sorry didn’t notice your reply…

    The problem is when using elastic. I have it on fade right now so it works, if I set media to use elastic, the popup shows as a 2X2 square in the top left.

    I updated the nivo css but that has nothing to do with it as the css for that is in a different file…

    I have changed media to use elastic in case you want to see what I mean, just click on one of the images in the recent projects section. The actual site is now live on a different server and domain but this is my test site and directory for this.

    I just checked in firebug and it seems like when it is set to use elastic the css for #fancybox-content, #fancybox-wrap, and #fancybox-content get messed up.

    I will test this some more and post a fix if I find one…

    Ok found my problem it was a conflict with jQuery as I had added it manually in my head, I could never get it to work using wp jQuery, but did some research and I was doing it wrong. Hopefully anyone else with this problem will find this thread. Here is what I had wrong.

    In my header.php file above the </head> I was using.

    <!-- Add jQuery library -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
    
    <!--Nivo-->
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/themes/orman/orman.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    
    <!-- Add Slider -->
        <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/jquery.nivo.slider.js" ></script>
    <!--Nivo-->
    <?php wp_head(); ?>
    
    </head>

    Since wp already has built in jQuery I had to use

    <!-- Add jQuery library -->
    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_head(); ?>
    
    <!--Nivo-->
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/themes/dark/dark.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
    
    <!-- Add Slider -->
        <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/nivo-slider/jquery.nivo.slider.js" ></script>
    <!--Nivo-->  
    
    </head>

    I was also loading the function wrong to use the built in I guess. I was using

    $(window).load(function() {
        $('#slider').nivoSlider({

    But it needed to be

    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider({

    Thanks bowenac for sharing your experience. It might help others running into the same issue. These kind of double loading library conflicts can sometimes be hard to figure out…

    I was also loading the function wrong to use the built in I guess.

    Yes, another one that might escape many: the WP included jQuery runs in the so called ‘no conflict’ mode which means you cannot reference the library through its usual $ sign.

    By the way: if you would like to use the jQuery library hosted by Google (which might improve your sites speed a bit) you can install a very neat plugin called Use Google Libraries. But you’ll still need to reference jQuery through ‘jQuery’ and not the short hand $ sign!

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Easy FancyBox – Theme problem’ is closed to new replies.