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

JQuery lightbox plugin: Scaling very large images to fit screen

提问by Bill VB

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

我正在使用 jQuery “Lightbox”插件，虽然我不知道这是否是有关手头问题的必要信息。

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?

我通过幻灯片放映的图像非常大；它们中的每一个都远大于屏幕（我没有在我的服务器上托管图像，所以我无法调整它们的大小）。我需要缩放它们以适应屏幕的边界（可能还有一些余量）。是否有一些 JQuery 或其他 Javascript 片段可以解决这个问题？

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!

现在我使用“zoombox”，它肯定解决了缩放问题。但是，现在所有漂亮的幻灯片功能都丢失了！即，我无法使用箭头键或在图像库中循环！

回答by DaveE

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

以下是三个功能丰富且使用广泛的插件，它们应该可以轻松完成工作：

http://www.Hymanlmoore.com/colorbox

http://www.Hymanlmoore.com/colorbox

http://fancybox.net/

http://fancybox.net/

http://www.grafikart.fr/zoombox

http://www.grafikart.fr/zoombox

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

编辑：几乎所有灯箱解决方案都在以下网址列出和比较：http: //planetozh.com/projects/lightbox-clones/

回答by Andreas Yankopolus

I've settled on Floatboxafter 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.

在测试了十几个这样的库之后，我选择了Floatbox。默认设置将图像调整为适合屏幕的大小并允许使用箭头键进行导航。单击图像可将其缩放至 100%。它很容易在颜色、窗户装饰等方面进行配置。

回答by jairbow

I forked Lightbox2 to include automatic scaling.

我分叉了 Lightbox2 以包含自动缩放。

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

现在，如果图像大于窗口，它会自动调整到 80%。

You can find it here, on my new repo.

你可以在这里找到它，在我的新仓库中。