JQuery lightbox plugin: Scaling very large images to fit screen

javascript jquery lightbox
Bill VB picture Bill VB · May 16, 2012 · Viewed 16.4k times · Source

I'm using the jQuery "Lightbox" plugin, although I don't know if that's necessary information about the problem at hand.

The images I'm putting through my slideshow are quite large; each of them is far larger than the screen (I don't host the images on my server so I cannot resize them). I need to scale them to fit within the bounds of the screen (probably with some margin as well). Are there some JQuery or other Javascript snippets out there to take care of this?

Edit

Now I use "zoombox", which certainly fixes the scaling issue. However, now all the nice slideshow features are lost! I.e., I cannot use the arrow keys or cycle through the gallery of images!

Answer

DaveE picture DaveE · May 16, 2012

Here are three plugins which are pretty feature rich and widely used, they should do the job with ease :

http://www.jacklmoore.com/colorbox

http://fancybox.net/

http://www.grafikart.fr/zoombox

Edit: Pretty much every lightbox solution is listed and compared at : http://planetozh.com/projects/lightbox-clones/

Related questions

Using JQuery to open a popup window and print

A while back I created a lightbox plugin using jQuery that would load a url specified in a link into a lightbox. The code is really simple: $('.readmore').each(function(i){ $(this).popup(); }); and the link would look like …

Read More
How to make a jquery lightbox open multiple images from one link?

Using a lightbox like ColorBox or jQuery Lightbox Plugin how can i make a single link which opens a gallery / array of images? For example i have 1 thumbnail and when a user clicks it i want it to open multiple …

Read More
How to fix the width and height of jquery lightbox?

I have aplied jquery lighbox on my image gallery, but due to the variable size of images, the lightbox size is not fixed hence opens up with image's original size, this in turn causes the biga images to go out …

Read More