0

我正在尝试使任何 Lightbox 类型的代码都能正常工作，但它似乎不适用于 jQuery 1.7.2 。我基本上是在 iFrame 中制作表格。当有人点击横幅时，它会在灯箱中打开一个选择表单，他们可以注册邮件列表。我目前正在使用 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代码，它只是将您链接到不在fancybox中的页面）

http://www.miller-media.com/sites/ncfit/index2.html（这是来自 jquery.com 的 JS 调用，带有相同版本的 jquery（1.7.2）。幻灯片不再有效，但如果你点击右上角的横幅，fancybox 就可以工作）

4

2 回答 2

1

WP jQuery 和官方的区别在于线路

jQuery.noConflict();

在末尾。可能会使用无冲突模式来避免扰乱 Mootools 库。尝试使用官方 jQuery，但之后直接运行上面的代码行。

于 2012-09-07T02:36:02.967 回答
0

我想到了。感谢 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。

于 2012-09-07T03:17:59.750 回答