JavaScript libraries conflicting with each other

Question

I am working on a modeling website for my girlfriend and she wants a big slideshow as the background on the website. For this, I used the JonDesign gallery, which is well suited for this purpose and relatively light.

Now for the contact form, I would like to use the 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 ID'd or class'd elements twice. I looked at the code and could not immediately detect the conflict. I'm sure I missed something. I can’t understand this because I don’t have much experience with JavaScript, not to mention Mootools or Slimbox.

Here is 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, there is a conflict 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 use unmodified code from JD Gallery and SlimBox . Any help would be greatly appreciated!

Answer 1

, . : (+1). Per Anurag, Chrome ( - = .) . SlimBox , . , SlimBox SlimBox JS: js src. js - , src - . -, js, .

Bottom Line: No script , SlimBox . !

Answer 2

, , - :

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

Firefox Chrome , Internet Explorer. , , Chrome, Firefox IE.

Anurag, MooTools . , scripts/mootools.js script, .

Answer 3

JQuery JQuery, , . . Mootools - .

Answer 4

, 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');

, - .