3

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

现在，对于联系表单，我想使用 Lightbox/Slimbox 样式。Slimbox 与 Mootools 配合使用，JD Gallery 也使用该工具。不幸的是，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的未修改代码。任何帮助将非常感激！

4

4 回答 4

3

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

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

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

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

于 2010-06-27T05:43:25.217 回答
1

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

于 2010-06-26T21:28:21.577 回答
1

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

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

于 2010-06-27T12:01:45.293 回答
0

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

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

于 2014-06-05T20:01:43.520 回答