|Lightbox and FadeSlideShow cancel each other out|
How do I stop Lightbox and FadeSlideShow from canceling each other out?
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.
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.
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.
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!
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.
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 *** ?>
<? // ***** JAVA STUFF FOR THE LIGHTBOX IMAGE VIEWER ****** ?>
<? // ***** JAVA FOR THE FADE SLIDESHOW ****** ?>
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.
Try it in this order:
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. :)
Also, you're using XML Processing Instruction tags <? ?> to hold comments... don't do that. Use real HTML comments instead, like:
<!-- Lightbox dependencies -->
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.
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.
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.