jquery - 在灯箱中显示链接到全尺寸图像的缩略图（没有两个单独的图像文件）

Question

我正在以标准 HTML 格式显示数字图像。我不知道图像的大小。有些尺寸很小，但有些很大。

<img src="image1.jpg">
<img src="image2.jpg">

我想做什么..

1. 在不扭曲图像的情况下缩小图像（如果宽或高于 250 像素 x 250 像素）。
2. 用户应该能够单击图像以在灯箱中查看全尺寸。

我看到了灯箱 jQuery 插件，但它似乎需要单独的缩略图。有没有办法仍然利用它？

我正在使用最新的 Chrome，所以我可以在这个项目中使用 HTML5/CSS3/jQuery/etc。

Answer 1

一些建议：

每当您必须处理缩略图/全尺寸图像时，您都必须提供两者，因为使用全图像作为预览会影响整体加载性能[想想移动设备]。

如果您可以控制服务器，请考虑使用一些按需缩放[例如PHP 中的 GD 库]或缩略图的抢先缓存[更好和更具可扩展性的选项]。

最后一件事：关于您使用 Chrome，考虑到会有人坚持使用IE8左右，请考虑您网站的受众，而不仅仅是您的测试环境。