WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Easy FancyBox - Theme problem (16 posts)

  1. Alain Lankers
    Member
    Posted 1 year ago #

    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 http://wordpress.org/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: http://bit.ly/RWrm5H

  2. Alain Lankers
    Member
    Posted 1 year ago #

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

  3. reneequinn
    Member
    Posted 1 year ago #

    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?

  4. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  5. bowenac
    Member
    Posted 1 year ago #

    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...

  6. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

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

  7. bowenac
    Member
    Posted 1 year ago #

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

  8. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    @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 ;)

  9. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    @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 :)

  10. bowenac
    Member
    Posted 1 year ago #

    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?

  11. bowenac
    Member
    Posted 1 year ago #

    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...

    http://www.adamcbowen.com/BlueSteel/

  12. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

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

  13. bowenac
    Member
    Posted 1 year ago #

    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.

  14. bowenac
    Member
    Posted 1 year ago #

    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...

  15. bowenac
    Member
    Posted 1 year ago #

    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({
  16. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic