Question

我正在尝试使任何Lightbox类型的代码工作，它似乎不适用于jQuery 1.7.2。我基本上是在iFrame中制作一个表单。当有人点击横幅时，它会在灯箱中打开一个optin表单，他们可以注册邮件列表。我目前正在使用Fancybox 2，当我使用时它看起来很漂亮：

<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版本，但是当我这样做时，它会导致首页上的图片幻灯片停止工作。

现在，我用jQuery 1.7.2和1.8做了一个JSFiddle，他们都工作了。所以现在我不知道是什么导致了这个问题。为了清楚起见，我正在使用XAMPP在我的计算机上测试该站点而没有任何其他代码或插件，以避免在我最初测试时发生冲突。我知道这不是一个可以用jQuery.noConflict解决的问题，因为它不能处理页面清理代码。

以下是我用来测试功能的代码：

<!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包含文件和幻灯片有关。幻灯片播放仅在我使用<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链接的任何其他版本，它不起作用。我想知道代码中是否有某些相对链接？

修改

以下是链接：

http://www.miller-media.com/sites/ncfit/index.html（这包含了WP包含的JS文件。你会注意到幻灯片显示效果很好但是如果点击右上角的横幅，附带了fancybox代码，它只会将你链接到页面不在花式框中）

http://www.miller-media.com/sites/ncfit/index2.html（这是来自jquery.com的JS调用，具有相同版本的jquery（1.7.2）。幻灯片显示不再有效，但如果单击右上方的横幅，则fancybox可以正常工作）

Answer 1

WP jQuery和官方版之间的差异是

行

jQuery.noConflict();

最后。可能会使用无冲突模式来避免扰乱Mootools画廊。尝试使用包含官方jQuery，但之后直接运行上面的代码。

Answer 2

我明白了。感谢Owlvark指出WP jQuery中的noConflict。我基本上必须为我的Fancybox代码做这些事情：

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

我只需更改变量即可使用noConflict，因为页面上还有Mootools。

Fancybox 2无法使用jQuery 1.7.2

修改

修改

2 个答案: