Lightbox and FadeSlideShow cancel each other out

How do I stop Lightbox and FadeSlideShow from canceling each other out?

[php_dave]

Hello. I am a novice when it comes to Javascript and only tend to use it when it's part of a tutorial or premade package. This usually works just fine except for when there's a problem as I then have no idea what to do.

Basically on my site I have used a number of scripts from Dynamic Drive. Two of them seem to make each other break.

I expect that it's due to them both having a function with the same name as the other but like I said, I am a novice and I'm not even sure what I'm looking for, so I hope that one of you fine people can help me.

The conflict is between two DHTML scripts using Javascript: Lightbox and FadeSlideShow.

Lightbox is of course the script that makes images pop up in the middle of the screen whilst fading the website behind it.

FadeSlideShow generates a slide show of images which fade into each other. It also pops up a caption at the bottom of each image when the image displays.

The only way for them both to work is if the link to the LightBox Javascript is listed first.

However, even with FadeSlideShow listed after Lightbox, there is part of the FadeSlideShow which isn't working in IE9 (but it does work in Chrome). That part is the caption text which pops up on every image display.

The script that I am using is this one: [dynamicdrive.com...] and of the four examples, you'll see that the top right one has text popping up on each image. That's what mine does except that in IE9 there is no text.

Can anyone suggest what I am even looking for in either the FadeSlideShow javascript or any of the four lightbox javascripts to solve this problem? I am guessing it's the name given to the caption variable which might be used to name something else in the Lightbox scripts but I don't really have any idea and becasue it works in Chrome and not IE9 it makes it even more awkward to solve.

The scripts I use for the Lightbox are from this page: [justinbarkhuff.com...]

Sorry for the lack of structure to this post. It really isn't very easy to describe the problem. Any help is much appreciated. Thanks!

[Fotiman]

Your Lightbox script is based on the Prototype/Scriptaculous framework. Your FadeSlideShow script is based on the jQuery framework. It's generally not a good idea to include 2 frameworks. It's going to add a lot of bloat. In any case, you'll need to use jQuery's noConflict. You probably want to look into [api.jquery.com...]

I don't know if that will FIX your problem, but it's a good start.

[php_dave]

Thanks for the reply, Fotiman.

I don't know anything about frameworks and such. I checked the page you linked and tried to apply the noConflict tag it demonstrated. However, putting noConflict around either of the frameworks just stops it from working!

This is where I put it. As you can see, I placed the noConflict part around the Lightbox which as you said uses a different framework from jQuery. But this just stops the Lightbox from working.

**************************

<? // *** FETCH JQUERY *** ?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>


<? // ***** JAVA STUFF FOR THE LIGHTBOX IMAGE VIEWER ****** ?>

<script type="text/javascript">
$.noConflict();

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>

</script>


<? // ***** JAVA FOR THE FADE SLIDESHOW ****** ?>

<script type="text/javascript" src="scripts/fadeslideshow.js">


**************************

Does anything jump out at you as being really obviously wrong? Or is the problem buried a lot deeper than this? If I have to then I can find a jQuery Lightbox but I'd really prefer not to if it can be easily fixed somehow.

Thanks again.

[Fotiman]

Try it in this order:

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/fadeslideshow.js"></script>

Note, I looked at the fadeslideshow.js file and one of the first things it does is call noConflict(), which to me seems like a very poor architectural design to have an application execute code that changes the way the entire framework works.

I don't know if putting them in this order will fix your problem, but give it a shot and report back. :)

Side notes: It's "JavaScript", not "JAVA". Java is a very different technology.
Also, you're using XML Processing Instruction tags <? ?> to hold comments... don't do that. Use real HTML comments instead, like:
<!-- Lightbox dependencies -->

[php_dave]

Whoops! I'm not sure how I wrote it down wrong in my last post but the order that you just suggested is in fact the order I already had it.

If I put the ajax.jquery line first and Lightbox afterwards then none of the Javascript works. I had worked out through trial and error that this was the case so my site is already using the order that you have suggested above. And the results are that everything seems to work except for the captions displaying on the FadeSlideShow.

You got any more ideas?

Thanks again for your help, Fotiman. My apologies for not even getting the details right when trying to explain them before :s

On a sidenote, does it make any real difference if I use <? *** Notes *** ?> instead of <!-- Notes --> or is it simply a case of improper consistency? I'm pretty good at what I do (PHP and MySQL) but I expect there are a thousand things I do differently from the official ways as I'm completely self-taught.

[Fotiman]

My suggestion would be to look into a jQuery alternative to lightbox. If you're only using Prototype/Scriptaculous for this lightbox effect, you'll greatly improve the front end performance by eliminating these and finding a jQuery alternative.

As for does it make a difference if you use <? *** Notes *** ?>, well, it's technically wrong. The browser may be doing different work when it encounters these than it would for an HTML comment. I could markup my page with nothing but <span> elements if I wanted, but it's not what they are designed for. I use paragraph elements for paragraphs, table elements for tables, and HTML comments for HTML comments.