lightbox help please

[stusan96]

1) Script Title: Lightbox

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

3) Describe problem:
I am trying to use lightbox on my site, but am having trouble getting it to work properly. When I click on the image, the new image opens but without the shadow effect. Does anyone know why this would be happening? The code that I have in the head tag is -
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />

thanks

[jscheuer1]

It could be a number of things. Are you even using the Dynamic Drive version? I ask because:

lightbox/scriptaculous.js?load=effects,builder

is not the syntax for the Dynamic Drive version, rather for the newer version 2.04. It's OK if you are using the newer version, I'm also familiar with it. But if you want your implementation debugged, I'd need to see it:

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

[stusan96]

I guess I am using the newer version, I wasn't sure. The page you can see it on is http://www.theduvetcompany.com/duvetcovers

thanks

[jscheuer1]

You have a bit of an apples and oranges situation on your page. You are using the lightbox.js and lightbox.css from this version:

http://www.huddletogether.com/projects/lightbox/

Which doesn't require prototype, scriptaculous, effects or builder (you don't even have builder anyway, but do reference it in your scriptaculous call). It could be that prototype or one of the other unnecessary scripts is interfering.

So get rid of this:

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

But, more likely you are just missing, or have misplaced:

overlay.png

which is required in IE for the version you are using. It should be in the same folder as your page, and is not there. Here's a link to it on the official site (right click, 'save as', then upload it to your page's folder):



Other browsers don't need it, so are working fine on your page (I tested FF and Opera - both show the shadow background).

So, you could probably just upload the overlay.png file to the same folder as your page and that should take care of it in IE as well. Just make sure to clear your cache in IE to make sure you are not viewing the older 404 not found version of the overlay.png file.

[stusan96]

That worked. Thank you for your help, I really appreciate it.

[stusan96]

Thanks for your previous help with my page that had Lightbox. I have a new page that I am trying to get lightbox to work with and it's not working. I have the exact same code and have downloaded all of the proper css, js etc. Wondering if you could have a look at it. http://strollie.com/fall_strollie.html

Thanks,
Stephen

[jscheuer1]

Works here, except in IE, where there appears to be a css issue(s) - the Lightbox appears at the top of the page and has scrollbars. Is that the trouble you are having? Other browsers it looks fine.