JavaScript库相互冲突

2019-10-24 01:33:14 阅读：235 来源： 互联网

标签：mootools slimbox gallery 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript库相互冲突