View Full Version : Lightbox conflicting with another script?

10-28-2008, 11:23 AM
1) Script Title: Lightbox image viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox/index.htm

3) Describe problem:

I am creating a photo album website and have been using the "Lightbox" image viewer script very successfully. I have come across one slight problem though - on the site's homepage only, I have also used a random image javascript to place one of a selection of pics at the top of the page when it loads or is refreshed. When I try to use Lightbox to display a pic on the homepage it will not work - the pic just opens up without the lightbox effect. It would appear that the random script and the Lightbox script are in conflict somehow as Lightbox works perfectly well on all the other pages.
It is not a major headache for me if I cannot get Lightbox working on the homepage as it is not one of the main album pages but is there anything simple I can do to avoid this conflict of scripts and get it working?

-- in Head section of homepage --

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox.js"></script>
<!-- Begin
var randomTWD = 0;
var DoIt = 0;
images = new Array;
images[1] = new Image();
images[1].src = "pic1.jpg";
images[2] = new Image();
images[2].src = "pic2.jpg";
images[3] = new Image();
images[3].src = "pic3.jpg";
images[4] = new Image();
images[4].src = "pic4.jpg";
images[5] = new Image();
images[5].src = "pic5.jpg";
images[6] = new Image();
images[6].src = "pic6.jpg";
images[7] = new Image();
images[7].src = "pic7.jpg";
images[8] = new Image();
images[8].src = "pic8.jpg";
images[9] = new Image();
images[9].src = "pic9.jpg";
images[10] = new Image();
images[10].src = "pic10.jpg";
images[11] = new Image();
images[11].src = "pic11.jpg";
images[12] = new Image();
images[12].src = "pic12.jpg";
images[13] = new Image();
images[13].src = "pic13.jpg";
images[14] = new Image();
images[14].src = "pic14.jpg";
images[15] = new Image();
images[15].src = "pic16.jpg";
images[15] = new Image();
images[15].src = "pic16.jpg";
function TWDpics() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
randomTWD = Math.round((imgnum - 1) * randnum) + 1;
} while (randomTWD == DoIt);
DoIt = randomTWD;
document.ImageHolder.src = images[DoIt].src;
// End -->

-- In body section where random image displays --

<img name="ImageHolder" src="clear.gif" width="600" height="200" border="0"></td>

-- In body section where link to "Lightbox" photo is --

<a href="photo.jpg" rel="lightbox">Click this photo</a>

10-28-2008, 11:40 AM
Looks like you left something out. The random pics script will not do anything unless run. There is nothing in your code that shows it's being run. I'm guessing that you have something like so in your body tag:


If so, get rid of that. Put the lightbox script after the random pics script and add this to the end of the random pics script:

window.onload = TWDpics;

Because lightbox will (at least in theory) add to an existing window.onload, making those changes and placing lightbox after it instead of before, should work out.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

10-28-2008, 12:04 PM
Do you have a link or more code on what your random image thingy does?

Hi jscheuer1, that was quick or I am slow.


10-28-2008, 12:57 PM
John - thanks for the fast response! :eek: Yes, you're right I did forget to include this bit in my post .....

<body onLoad="TWDpics();"

I am at work just now but will try your recommendations when I get home and report back. I do not have the website 'live' as yet so cannot post a link as I am still working on the pages.

Just one question, when you say Put the lightbox script after the random pics script and add this to the end of the random pics script: i take it you mean the parts between the [head] tags?

10-28-2008, 02:34 PM
John - have just made your suggested changes and everything works perfectly. Thanks a lot!