jQuery lightbox image size based on screen resolution and browser window size

I have a site with a lot of thumbnail images that display a larger version using a jQuery lightbox effect when clicked. This works well but it doesn’t make good use of the available screen real estate.

To support 1024x768 users I use a minimum image size of 640x640 (so that 640x480 images in either orientation always fit on the screen). However this wastes a lot of space where I could be displaying a higher resolution version to users with a higher screen resolution or larger browser window. For example, for 2560x1600 users I would like to use a 1600x1200 image.

Is there a lightbox plugin that can handle multiple image sizes automatically?

This is a Wordpress site so a Wordpress plugin could also work.

Any suggestions appreciated.

Hey davejuk

I use Shadowbox JS on my website with the [URL=“http://wordpress.org/extend/plugins/nextgen-gallery/”]NextGen Gallery Wordpress plugin to manage the galleries. I only use large images and Shadowbox will just resize them on smaller screens. (Open up an image and resize your browser window http://jvdl.id.au/galleries/wildlife.)

Hi John,

Thank you for your reply.

I’m not keen on paying for a lightbox script when there are so many great open-source options. Having said that, it does appear to do what I want with regard to resizing the image with the viewport.

I just can’t believe that this isn’t a common question. There must be a free solution.

Yeah I’ve begun to notice that lot of authors of popular scripts are stipulating in their licenses that they require a fee for commercial use of their script.

Fancybox is another good example of a lightbox that is excellent, but now requires a fee for commercial use.

A few other free ones are:

Not all of them resize when the browser is resizes, but they do all seem to size the image to the browser if the image is larger than the viewport. Hopefully one of them will suit your needs :slight_smile: