Fancybox 2 not working with jQuery 1.7.2

问题

I am trying to make any Lightbox type code work and it doesn't seem to be working with jQuery 1.7.2 . I am basically making a form in an iFrame. When someone clicks on a banner, it opens up an optin form in a lightbox and they can signup for the mailing list. I am using Fancybox 2 currently and it looks beautiful when I use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

But when I revert to:

<script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

it no longer works. I thought maybe I could use the 1.7 version on the site in general, but it causes the picture slideshow on the front page to stop working when I do that.

Now, I did a JSFiddle with jQuery 1.7.2 and 1.8 and they both worked. So now I'm at a loss of what is causing the problem. To be clear, I'm using XAMPP to test the site on my computer without any other code or plugins so as to avoid conflicts while I'm initially testing it. I know it's not an issue that can be resolved with jQuery.noConflict because it's not working on a page clean of code.

Here is the code I'm using just to test the functionality:

<!DOCTYPE html>
<head>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.0"></script>

<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=1.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=1.0.3"></script>
<script type="text/javascript" src="js/jquery.fancybox-media.js?v=1.0.3"></script>

<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=1.0.6" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
    maxWidth    : 800,
    maxHeight   : 600,
    fitToView   : false,
    width       : '70%',
    height      : '70%',
    autoSize    : true,
    closeClick  : false,
    openEffect  : 'elastic',
    closeEffect : 'elastic',
    helpers : {
    overlay : {
        css : {
            'background' : 'rgba(58, 42, 45, 0.3)'
        }
    }
}
});

});
</script>


</head>


<body>
<a class="various fancybox.iframe" href="http://www.ncfitclub.net"><img src="http://images.beachbody.com/tbb/coo/ad_banners/tropical_shakeology/shakeology-tropical-new-728x90.jpg" width="72" height="72" alt="" /></a>
</body>
</html>

Any ideas?

EDIT

I'm finding it has something to do with the WP include file and the slideshow. The slideshow ONLY works if I use <script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>. It doesn't work if I use version 1.7.2 or 1.8 or any other version linked directly from jQuery.com . I'm wondering if there are some relative links in the code somewhere?

EDIT

Here are links:

http://www.miller-media.com/sites/ncfit/index.html (this has the WP include JS file. You'll notice that the slideshow works fine but if you click the banner in the top right, which has the fancybox code attached, it just links you to the a page not in a fancybox)

http://www.miller-media.com/sites/ncfit/index2.html (this is with the JS call coming from jquery.com with the same version of jquery (1.7.2). The slideshow no longer works but the fancybox DOES work if you click on the top right banner)

回答1:

The difference between the WP jQuery and the official one is the line

jQuery.noConflict();

at the end. No-conflict mode is probably being used to avoid upsetting the Mootools gallery. Try using including the official jQuery but with the above line of code running straight afterwards.

回答2:

I figured it out. Thanks to Owlvark for pointing out the noConflict within the WP jQuery. I basically then had to do something along these lines for my Fancybox code:

<script>
var $j = jQuery.noConflict();
    $j(document).ready(function(){
            $j(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

            //Example of preserving a JavaScript event for inline calls.
            $j("#click").click(function(){ 
                $j('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
                return false;
            });
        });

I just had to change the variable to use the noConflict since there was Mootools also on the page.

来源：https://stackoverflow.com/questions/12309665/fancybox-2-not-working-with-jquery-1-7-2

标签

jquery

fancybox

fancybox-2