View Full Version : Conflict with Lightbox and Jquery sliding boxes script

08-18-2009, 07:15 PM
Script Title: Lightbox image viewer 2.03a

Lightbox URL: http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

Sliding boxes URL: http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery

Describe problem:

When I installed the sliding boxes script without the lightbox it works perfectly, but when I put the two scripts together on the same page, only lightbox works but not the sliding boxes script.

I have been researching this for hours now and it seems like there are others out there with similar problems pertaining the lightbox script, specifically scriptalicious.js .

I have tried to use the fix $j....noconflict that has seem to work for some people but it did not work for me.

I've tried the Lightbox jQuery plug in here: http://leandrovieira.com/projects/jquery/lightbox/

The sliding box script works but the plug in does not. Maybe I installed it wrong, I don't know but the plug in does not work for me so I removed it.

The site where I am trying to make this work on can be found here: http://www.neo-scribe.com/sistastyle/p-acc.php

I would really appreciate anyone who figured out a fix for this conflict to please let me know as I am spending a lot of time I do not have on this.

Thank you,

12-09-2009, 04:55 PM

Did you find a resolution or workaround to the problem? I have been stuck here for the last few days. can't get the jQuery..no conflict to work for me. Could you please tell me what you did?


12-09-2009, 05:00 PM
No, I did not find a solution to this. No one replied either so I just gave up on it. I spend one whole working day trying to figure it out and it set me back too long so I scraped it all together. Lightbox was more important than the sliding script for my project.

If you ever figure out the solution to this please post it here so others can see for future projects!

12-09-2009, 05:33 PM
This part needs to be changed at the beginning as highlighted in two places:

//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
//Horizontal Sliding
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
//Diagnal Sliding
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
//Partial Sliding (Only show some of background)
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
//Full Caption Sliding (Hidden to Visible)
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
//Caption Sliding (Partially Hidden to Visible)
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});

the main jQuery script library tag and the above script come first on the page, before Lightbox.

You must update to (all files have changed) Lightbox 2.04a:


Demo here:


12-09-2009, 06:40 PM

I had a similar problem to this and found that Thickbox worked ok and didn't conflict with another script I had - Lightbox did conflict. If you get really stuck you should try Thickbox instead but I don't think it is supported anymore. Does work with videos though which is a bonus - or was for me.