JavaScript库相互冲突

我正在为我的女友制作一个建模网站,她想在网站上放一个大型幻灯片作为背景.我为此使用了JonDesign Gallery,它可以很好地实现此目的,并且相对较轻.

现在,对于联系表格,我想使用Lightbox / Slimbox样式. Slimbox可与Mootools配合使用,JD Gallery也使用它.不幸的是,Slimbox似乎与JD Gallery冲突,我不知道为什么.我检查了CSS是否存在冲突,但没有两次对元素ID或类进行过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的未修改代码.非常感谢您的帮助！

解决方法:

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

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

至少Firefox和Chrome会忽略结尾的逗号,但这是Internet Explorer中的语法错误.解决此问题后,您的代码在Chrome,Firefox和IE中对我来说效果很好.

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

标签：mootools,slimbox,gallery,javascript
来源： https://codeday.me/bug/20191024/1917113.html