JavaScript 库相互冲突

Question

我正在为我的女朋友开发一个模特网站，她想要一个大型幻灯片作为网站的背景。为此，我使用了 JonDesign Gallery，它非常适合此目的，而且重量相对较轻。

现在，对于联系表单，我想使用 Lightbox/Slimbox 风格。 Slimbox 与 Mootools 配合使用，京东画廊也使用 Mootools。不幸的是，Slimbox 似乎与京东画廊有冲突，我不明白为什么。我检查了 CSS 是否有冲突，但没有元素 ID 或类两次。我查看了代码，无法立即发现冲突。我确定我错过了什么。我无法弄清楚，因为我没有太多使用 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

当我不得不在同一页面中使用两个版本的 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');

我希望这样的东西也能解决你的问题。

Answer 2

好的，现在可以使用了。事情是这样的：我按照 Matthew Crumley 的建议删除了多余的逗号 (+1)。根据 Anurag 的说法，我检查了 Chrome 的开发者工具（我完全忘记了这一点 - 工作到很晚=不好。）它没有显示任何错误。然后我重新下载了SlimBox文件并尝试了演示，但没有成功。然后我注意到 SlimBox 有两个文件夹，其中包含 SlimBox JS 文件：js 和 src。 js 是具有正确库的正确文件夹，src 无论出于何种原因都不起作用。我更改了网站以使用 js 文件夹中的文件，现在可以正常工作了。

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

Answer 3

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

Answer 4

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

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

至少 Firefox 和 Chrome 会忽略尾随的逗号，但在 Internet Explorer 中这是一个语法错误。在我解决这个问题后，你的代码在 Chrome、Firefox 和 IE 中运行得很好。

就像 Anurag 在评论中提到的那样，您将 MooTools 包含了两次。它没有对我造成任何问题，但您可以删除 scripts/mootools.js 脚本，它应该仍然可以工作。