Question

I’m using http://lokeshdhakar.com/projects/lightbox2/. I have image thumbnails and on clicking them they open in lightbox – obviously.

The issue I have is that when some of those images are 1800×1200, lightbox covers the whole webpage.

How can I edit to ensure that the images are a maximum height of let’s say 400px and width is in proportion? I can’t simply upload the images in lower dimensions as they are user uploaded images, so I need to do this script/server side.

Thanks!

Answer 1

You can use the max-width and max-height CSS properties on both the images and the lightbox:

Demo: http://jsfiddle.net/rdfAV/1/

CSS:

img {
    max-width: 400px;
    max-height: 400px;
}

.lb-outerContainer, .lb-dataContainer {
    max-width: 420px;
    width: auto!important;
    height: auto!important;
}​

This method appears to be compatible with all major browsers, a full compatibility list is available here: http://caniuse.com/#feat=minmaxwh