Hi all,

I'd like to thank you first for integrating lightbox into the drupal cms. I have used it on many drupal sites. I am having a problem with the "overlay" div when maximizing a browser window. The inline style produced by the javascript does not update the width and height of the resized window. In order to replicate this, go to Lightbox 2 and make sure that your browser window is not the full width and height of your monitor. Click on a demo image, and the lightbox modal window should pop up. While the image is being shown, maximize your browser window. You should notice that when maximized, the overlay's width and height does not change. I have attached a screen shot to this post showing an example. Now I thought that this must be a known bug, but have not been able to find a way to fix it on the lightbox2 site or here at drupal.org. I have however found a site that utilizes lightbox (not in drupal), where this bug does not happen, (http://www.southernstorefixtures.com/preparedfoods01.html). I have tried comparing js/css/etc... but have been unable to find any differences. I'm sure that the problem lies in the fact that the style element given to #overlay in the js is not updating when the browser window is resized, I'm just not sure how to fix it. If anyone has any clue how to fix this, it would be most appreciated.

-rdentry

CommentFileSizeAuthor
lightbox2-bug.png449.77 KBrdentry

Comments

no2x’s picture

no2x commented
Category: support » bug
Status: Active » Needs work

Hi there,

same problem here. This is because lightbox writes width and height into the style tag of the overlay div.

A quick workaround is to change the lightbox.css or the lightbox_alt.css (depending on the layout you are using):

Replace the width and height values with the following:

#overlay {
...
width: 100% !important;
height: 100% !important;
}

So the values which JS writes into the style tag cannot overwrite the CSS values.

This is only a workaround! IMO the JS code should be modified (sorry i'm no specialist in this ;) ).

no2x’s picture

no2x commented

Oh, there is one more problem I just figured out:

If scrollbars appear (if you resize the window for example) or if you activate firebug (which shows on the bottom half of firefox), the overlay only displays in the top area - if you scroll down, the overlay ends and you can see your webpage.

This is because the overlay is positioned with absolute at top/left 0/0 (I don't know why). Again a quick workaround would be to fix this in the lightbox.css or lightbox-alt.css. We need to change the positioning to fixed:

#overlay {
...
width: 100% !important;
height: 100% !important;
position: fixed !important;
}
sri20198’s picture

sri20198 commented

Had the same issue. Instead of changing the lightbox.css, I changed the Lightbox settings at admin/settings/lightbox2. Under Image resize settings, check the box that says Disable resizing feature. It then just uses a single size of the image instead of showing different sizes for different browser window sizes.

@rdentry. In the site that you have mentioned (http://www.southernstorefixtures.com/preparedfoods01.html) I couldn't see the image resizing on its own when the browser window is resized.