JavaScript libraries conflicting with each other

Question

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.

Now, for the contact form I'd like to use something Lightbox/Slimbox style. Slimbox works with Mootools, which is also used by JD Gallery. Unfortunately, Slimbox seems to conflict with JD Gallery and I can't figure out why. I checked the CSS for conflicts, but there are no elements ID'd or class'd twice. I looked at the code and couldn't immediately spot a conflict. I'm sure I missed something. I can't figure it out because I don't have much experience with JavaScript let alone Mootools or Slimbox.

Here's my (relevant) code.

Head

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

Body

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

and

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

in the head.

I'm using unmodified code from JD Gallery and SlimBox. Any help would be much appreciated!

Answer 1

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.

Answer 2

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.

Like Anurag mentioned in the comments, you are including MooTools twice. It didn't cause any problems for me, but you can remove the scripts/mootools.js script, and it should still work.

Answer 3

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.

Bottom line: No script conflict after all, SlimBox was just distributed in a weird way. Thank you everybody for your help!

Answer 4

I think using only one framework is the best because the codes are easy to maintain and you can't get the errors like here.