代码之家 › 专栏 › 技术社区 › Jan K.

JavaScript libraries conflicting with each other

slimbox gallery mootools javascript

Jan K. · 技术社区 · 15 年前

I'm working on a modeling website for my girlfriend and she wants a large slideshow as background on the website. I used the JonDesign Gallery for that, which works nicely for this purpose and is relatively light-weight.

Here's my (relevant) code.

头

<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>`

As far as I can tell, the conflict is between these lines:

<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>

在头上。

I'm using unmodified code from JD Gallery 和 SlimBox . 任何帮助都将不胜感激!

4 回复 | 直到 11 年前

Matthew Crumley 15 年前

The only problem I can see is an extra comma at the end of the gallery options:

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

At least Firefox and Chrome ignore the trailing comma, but it's a syntax error in Internet Explorer. After I fixed that, your code worked fine for me in Chrome, Firefox, and IE.

就像评论中提到的Anurag一样,您包含了两次MooTools。它没有给我带来任何问题,但是你可以移除 scripts/mootools.js script, and it should still work.

Ciaran Archer 15 年前

In JQuery you can choose a new name for the JQuery function to avoid conflicts with other libraries, e.g. Prototype. Mootools might support something similar.

Jan K. 15 年前

Alright, it's working now. Here's what's going on: I removed the extra comma as per Matthew Crumley's suggestion (+1). Per Anurag, I checked Chrome's developer tool (I completely forgot about that - working late = bad.) It didn't show any errors. Then I redownloaded the SlimBox files and tried the demo, which didn't work. Then I noticed that SlimBox had two folders with its SlimBox JS files: js and src. js is the correct folder with the correct library, src doesn't work for whatever reason. I changed the website to use the file from the js folder and it's now working.

底线:毕竟没有脚本冲突,Slimbox只是以一种奇怪的方式分发。谢谢大家的帮助!

Shweta 11 年前

当我必须在同一页面中使用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');

I hope something like this will solve your issue too.