JQuery灯箱插件：缩放非常大的图像以适应屏幕

Question

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! Ie, I cannot use the arrow keys or cycle through the gallery of images!

Answer 1

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/

Answer 2

I've settled on Floatbox after testing out a dozen of these libraries. The default settings size the image to fit the screen and allow navigation with the arrow keys. Clicking on an image zooms it to 100%. It's easily configurable in terms of colors, window decorations, and the like.

Answer 3

I forked Lightbox2 to include automatic scaling.

Now, if an image is larger than the window, it will automatically resize to 80%.

You can find it here , on my new repo.