3

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!

Marcel Korpel
  • 21,536
  • 6
  • 60
  • 80
Jan K.
  • 1,607
  • 2
  • 13
  • 22
  • why are you including MooTools twice - `scripts/mootools.js` and `scripts/mootools-1.2.1-core-yc.js`? It's a hunch, but both seem to be referring to MooTools core. – Anurag Jun 27 '10 at 03:17
  • @Anurag I've tried a bunch of different combinations there. This just happens to be one. Your first hunch was mine, too, but that didn't work. – Jan K. Jun 27 '10 at 08:36
  • 1
    @Jan There must be an error in the console. Chrome/Safari have inbuilt Developer Tools, and Firefox has a nice extension called Firebug. That will point you on what's exactly wrong with it. – Anurag Jun 27 '10 at 09:01
  • 1
    Who else thinks the only reason for this question is to casually mention that he's dating a model? :-) – Matthew Crumley Jun 27 '10 at 14:07
  • @Matthew Crumley Don't you think she deserves an upvote? ;-) Nah, I was just wicked tired last night and frustrated because it didn't work the way I wanted it. I couldn't figure it out on my own, so SO had to come to my rescue. And she says "thank you Matt" :p – Jan K. Jun 27 '10 at 16:54
  • @Jan: I don't know if she deserves an upvote or not, but I did upvote the question. :-) Anyway, that's what Stack Overflow is for; sometimes you just get stuck. – Matthew Crumley Jun 27 '10 at 17:30

4 Answers4

3

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.

Matthew Crumley
  • 101,441
  • 24
  • 103
  • 129
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.

Ciaran Archer
  • 12,316
  • 9
  • 38
  • 55
1

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!

Jan K.
  • 1,607
  • 2
  • 13
  • 22
  • 1
    I'm guessing the reason The slimbox.js file from the src directory doesn't work is because it doesn't include the code to automatically attach itself to lightbox links. – Matthew Crumley Jun 27 '10 at 14:05
  • Must be. At least it's running now :) – Jan K. Jun 27 '10 at 14:15
  • You should mark this as the correct answer then. Unanswered questions can circulate back on front-page at times. – Anurag Jun 27 '10 at 17:37
0

I faced the same issue when I had to use two versions of jquery in the same page.

<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);  
</script>

And then you can reference your different version of jquery by using something like this :

var $noborders = $jq('.noborders');

I hope something like this will solve your issue too.

Shweta
  • 924
  • 14
  • 23