How to resize images in Lightbox2?

Question

I am using http://lokeshdhakar.com/projects/lightbox2/ . I have thumbnails of images and when I click on them they open in a lightbox - obviously.

The problem is that when some of these images are 1800x1200, the lightbox covers the entire web page.

How can I edit to provide a maximum image height, such as 400 pixels and a width? I cannot just upload images in lower sizes since they are uploaded by the user, 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 images and 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 is apparently compatible with all major browsers, a full compatibility list is available here: http://caniuse.com/#feat=minmaxwh

Answer 2

Try adding the following to your CSS:

  .lb-image{ max-width: inherit; } 

Answer 3

Thanks a lot .. really help all the way on my landing page

Some modified codes, play wisely

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