Question

我有一个带有一堆缩略图的照片库。

<img src="/images/33113_thumb.jpg" class="thumb" />
<img src="/images/1233_thumb.jpg" class="thumb" />
<img src="/images/99513_thumb.jpg" class="thumb" />

我想要做的是使用jQuery，以便当用户点击图片时，我可以将全尺寸图片加载到视图中。

问题是我不知道在哪里可以存储我想要加载的图像的全尺寸URL。我希望它可用，并且不需要服务器，因为它会影响性能。

我可以为上面的拇指存储替代的全尺寸网址的任何建议吗？任何技巧？

由于

Answer 1

如果您使用HTML5 DocType，则可以将自定义数据属性添加到标记标记中。

例如：

<img src="/img/thumb.jpg" data-altsrc="/img/fullsize.jpg">

JQuery可以用.attr（'data-altsrc'）来获取值。

在pagoda.com上使用类似的方法存储alt图像“rollover”的URL。没有HTML5 DocType它仍然可以工作。如果您尝试验证标记，则只会标记“invalid”属性。

Answer 2

我使用jquery lightbox插件实现了它。摘录如下：或website（点击事件或最新发布部分）了解实施时的显示方式

脚本

$(function() {
  jQuery('#magscarousel li a').lightBox();
});

HTML标记

<ul id="magscarousel" class="jcarousel-skin-mags">
<li><a href="./images/mag_cover_large_7.jpg"><img src='./images/mag_7.jpg' id='mag_cover_7'></a></li>
<li><a href="./images/mag_cover_large_6.jpg"><img src='./images/mag_6.jpg' id='mag_cover_6'></a></li>   
</ul>

Answer 3

在开发此类应用程序之前，我建议您查看现有的解决方案。 Jq.Lightbox将是一个。

回到你的问题，javascript函数的基本思想需要是非侵入性的，这意味着即使用户没有能力使用你的脚本，你的网站仍然可以正常运行。因此，您的应用程序的标记至少会像：

<a class='gallery' href='fullsizeimagelink' alt=''><img src='thumbimage'></a>

在这种情况下，即使没有javascript，用户仍然可以点击图片并移动到完整尺寸的图像......此外，它还可以解决您的问题。

Answer 4

如何将它们存储在无序列表中并链接到它们。

<ul>
    <li><a href="/images/33113.jpg"><img src="/images/33113_thumb.jpg" class="thumb" /></a></li>
</ul>

然后您可以捕获该点击事件，取消默认浏览器行为，但请阅读链接href值以查看大图片的位置。

这也有一个优点，即它可以禁用JavaScript（他们仍然可以点击查看完整尺寸的图片）。

图像库与拇指，具有全尺寸图像URL准备加载

4 个答案: