相互冲突的 JavaScript 库

Question

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

现在，对于联系表单，我想使用一些 Lightbox/Slimbox 样式。 Slimbox 与 JD Gallery 也使用的 Mootools 配合使用。不幸的是，Slimbox 似乎与 JD Gallery 冲突，我不明白为什么。我检查了 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

我能看到的唯一问题是在图库选项末尾多了一个逗号:

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

至少 Firefox 和 Chrome 会忽略结尾的逗号，但这是 Internet Explorer 中的语法错误。在我修复该问题后，您的代码在 Chrome、Firefox 和 IE 中对我来说运行良好。

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