Fancybox 2不适用于jQuery 1.7.2 [英] Fancybox 2 not working with jQuery 1.7.2
问题描述
我正在尝试使任何Lightbox类型的代码正常工作，并且它似乎不适用于jQuery 1.7.2.我基本上是在iFrame中制作表单.当某人单击横幅时，它会在灯箱中打开一个optin表单，他们可以注册邮件列表.我目前正在使用Fancybox 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>
但是当我恢复为:
<script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
它不再起作用.我以为也许我一般可以在网站上使用1.7版本，但是这样做会使首页上的图片幻灯片停止工作.
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.
现在，我使用jQuery 1.7.2和1.8做了一个JSFiddle，它们都起作用了.所以现在我不知道是什么引起了问题.需要明确的是，我正在使用XAMPP来在计算机上测试该网站，而没有任何其他代码或插件，以避免在我最初对其进行测试时发生冲突.我知道这不是可以用jQuery.noConflict解决的问题，因为它不能在没有代码的页面上工作.
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>
有什么想法吗?
我发现它与WP include文件和幻灯片放映有关.只有使用<script type='text/javascript' src='http://www.ncfitclub.net/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>时，幻灯片放映才有效.如果我使用的是1.7.2或1.8版本或直接从jQuery.com链接的任何其他版本，则它将不起作用.我想知道代码中是否存在某些相对链接?
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?
以下是链接:
http://www.miller-media.com/sites/ncfit/index.html (其中包含WP include JS文件.您会注意到幻灯片可以正常运行，但是如果您单击右上角的横幅，该横幅附加了fancybox代码，则可以将您链接到页面不在fancybox中)
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 (这是来自jquery.com的JS调用，具有与jquery(1.7.2)相同的版本.幻灯片不再起作用，但如果单击右上角的横幅，则花哨的框就起作用了)
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)
推荐答案
我知道了.感谢Owlvark指出WP jQuery中的noConflict.然后，我基本上必须对我的Fancybox代码执行以下操作:
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;
});
});
由于页面上也有Mootools，我只需要更改变量以使用noConflict.
I just had to change the variable to use the noConflict since there was Mootools also on the page.
这篇关于Fancybox 2不适用于jQuery 1.7.2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
