Question

我正在为我的女朋友建立一个建模网站，她希望在网站上播放大型幻灯片。我使用了JonDesign Gallery，它可以很好地用于此目的并且重量相对较轻。

现在，对于联系表单，我想使用Lightbox / Slimbox样式。 Slimbox适用于Mootools，JD Gallery也使用它。不幸的是，Slimbox似乎与JD Gallery发生冲突，我无法弄清楚原因。我检查了CSS的冲突，但没有ID'd或class'd两次。我查看了代码，无法立即发现冲突。我确定我错过了什么。我无法理解，因为我没有太多的JavaScript经验，更不用说Mootools或Slimbox了。

这是我的（相关）代码。

头

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>

<script type="text/javascript" src="scripts/slimbox.js"></script>

车身

<script type="text/javascript">
function startGallery() {
 var myGallery = new gallery($('myGallery'), {
 timed: true,
 showArrows: false,
 showCarousel: false,
 delay: 6000,
 embedLinks: false,
 showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
            <a href="contact.php" rel="lightbox" class="menu">Contact her</a>
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
 <h3>Item 2 Title</h3>
 <p>Item 2 Description</p>
 <a href="#" title="open image" class="open"></a>
 <img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`

据我所知，冲突发生在这些界限之间：

<script type="text/javascript" src="scripts/mootools.js"></script>

和

<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>

在头部。

我正在使用JD Gallery和SlimBox中未经修改的代码。任何帮助将不胜感激！

Answer 1

我能看到的唯一问题是图库选项末尾有一个额外的逗号：

var myGallery = new gallery($('myGallery'), {
    ...
    showInfopane: false, <--- Right Here
});

至少Firefox和Chrome会忽略尾随逗号，但这是Internet Explorer中的语法错误。修好后，您的代码在我的Chrome，Firefox和IE中运行良好。

与评论中提到的Anurag一样，您将两次包括MooTools。它对我没有任何问题，但您可以删除scripts/mootools.js脚本，它仍然有用。

Answer 2

在JQuery中，您可以为JQuery函数选择一个新名称，以避免与其他库发生冲突，例如：原型。 Mootools可能会支持类似的东西。

Answer 3

好的，它现在正在运作。这是正在发生的事情：根据Matthew Crumley的建议（+1）我删除了额外的逗号。 Per Anurag，我检查了Chrome的开发者工具（我完全忘记了 - 工作到很晚=很糟糕。）它没有显示任何错误。然后我重新下载了SlimBox文件并尝试了演示，但是没有用。然后我注意到SlimBox有两个文件夹及其SlimBox JS文件：js和src。 js是具有正确库的正确文件夹，src因任何原因都不起作用。我更改了网站以使用js文件夹中的文件，它现在正在运行。

底线：毕竟没有脚本冲突，SlimBox只是以一种奇怪的方式分发。谢谢大家的帮助！

Answer 4

当我不得不在同一页面中使用两个版本的jquery时，我遇到了同样的问题。

<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);  
</script>

然后你可以使用类似的东西来引用你不同版本的jquery：

var $noborders = $jq('.noborders');

我希望这样的事情也可以解决你的问题。

JavaScript库彼此冲突

4 个答案: