Lightbox problem in Safari

[wda]

1) Script Title: Lightbox image viewer 2.03a

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

3) Describe problem: Some images blow out of the container in Safari for Windows and (so I was told) Google Chrome. Works fine in Firefox, IE7 and even IE6. It doesn't happen with every image or every time.

Also, while I'm here, any suggestions on fixing the lack of div scrolling in IE6 so that the lightbox overlay stretches and/or the lightbox container moves as the page scrolls right?

Site is http://www.wdarchitects.com.au/ then go to Projects and select either Education or Residential and then select an image to see the scrolling issue - any link under Projects to see the blow-out issue.

[codeexploiter]

I've tried the lightbox demos in DD and lokesh dhakar's website in both Safari for windows 3.1.2 and Google Chrome 0.2.149.30 multiple times but unable to find the issue you've reported also checked the lightbox user forum (http://www.huddletogether.com/forum/) for this issue but no user has reported this one (not necessary it should be there but anyway I've checked). Do you have a page in which this issue can be viewed? If so plz provide the link.

[wda]

I did provide a link, "
Site is http://www.wdarchitects.com.au/ then ... - any link under Projects to see the blow-out issue."

Thanks for having a look.

-AW

[jscheuer1]

This:

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

should be:

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

I don't see the lightbox styles linked to the page, but they may be in another linked stylesheet. However, there may be conflicts as regards the style. Remove all other styles to test this.

There could be other problems. With so many other scripts, there could be script conflicts. Remove all other scripts to see if that could be an issue.

[wda]

Thanks for that. I tried the change you mentioned and it didn't help, although I've deleted the

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

instead because it is redundant and I need the other line for another script to work. I tried deleting all scripts except for dropdown tabs, otherwise I would have no menu; still the same problem. I put the lightbox css, and everything else, into the one css file, without change. Have looked for conflicts, but turned up none.

What's happening is that the first image in a set seems to work ok but, usually, the second and subsequent images are stretched beyond their actual size and they pop outside of the lightbox container. As well as looking bad it stops access to the close box and hides the title text. I'll make a temporary change to my menu so I can try it with lightbox script only.

[wda]

1. removed all other scripts
2. put lightbox css in it's own file (according to the syntax in the lightbox instructions)
3. moved list of images into the inner div, "projects"

none of these changes had any effect on the problem.

[jscheuer1]

Lightbox needs:

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

Any other script that uses:

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

should be happy with:

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

But that isn't the issue here, at least not when it comes to eliminating possible conflicting scripts.

I think you may have misunderstood me. I wasn't suggesting that you eliminate all other styles and scripts to fix the problem. Just to do so for a test page so we can tell if there are conflicts. If after you make up a page that has no other styles or scripts on it other than lightbox, if that page still shows the problem, it is a bug in lightbox - or possibly something with your markup. But if that takes care of the problem, then we need to find the conflict.

[palnudb]

wda,

I just checked some of the images, they are not set to 72dpi resolution. It shouldn't matter on the web because pixels are pixels but, this sometimes causes problems.

try that.

Hope this helps.

palnudb

[wda]

Thanks Guys,

I found that the other script (Draggable) didn't like

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

, but lightbox seemed happy enough without the

?load=effects

I don't really need Draggable though, so if it helps to get rid of it, I will.

I will try a very stripped down test page and look at the resolution issue too, thanks.

-AW

[Dampfred]

Did you have any luck with this?

I have the exact same problem wt Lightbox on Safari (both Win and OS X) and Chrome.

Did some research and figured out that the imageContainer-div gets the wrong size while the outerImageContainer-div ends up correct.

I'm completely clueless on what's causing this.

Pls check out the site I'm working with if you have time. The problem occurs on the third image on this page if you browse to it through Lightbox. If you start with the third image, the others go bad instead.

http://www.annikaafklercker.se/index.php/singelbilder/

And yes, I have modified Lightbox a bit -- but since you had the same problem I figured it wasn't my modifications that caused this.

Thanks in advance.