javascript - 简单的 jquery 图片库

Question

我有一个简单的 jquery 图片库。当用户点击缩略图时，它会将主图像的 src 属性中的“缩略图”替换为“大”，我使用 jQuery 的委托(delegate)方法动态加载缩略图，并在没有绑定(bind)事件监听器的情况下使用它们来获取新的缩略图。 <强> jsfiddle

现在我需要能够链接到图库中的特定图片，例如，example.com/gallery.php#3rdimage 这样用户将立即看到图库中的第三张图片，类似于 engadget 使用的方法 http://www.engadget.com/photos/samsung-series-5-chrome-os-laptop-vs-11-inch-macbook-air-fight/#4128000

Answer 1

只需获取页面的哈希值并将其用作拇指集的索引:

wlh = window.location.hash[1];
if (!isNaN(wlh)) {
    $('#largeImage').attr('src', $('#thumbs img').eq(wlh-1).attr('src').replace('thumb', 'large'));
}

演示:jsfiddle.net/EbCKN/show/#3 (最初会显示第三张图片)

要在浏览图像时向 URL 添加哈希，以便 URL 准备好共享特定图像，它只是更改 #largeImage 后的额外一行:

window.location.hash = $('#thumbs img').index(this)+1;

演示:jsfiddle.net/EbCKN/1/show/ ( edit )