简单的 jquery 图像库

Question

我有一个简单的 jquery 图片库。当用户单击拇指时，它将在主图像的 src 属性中将“拇指”替换为“大”，我使用 jQuery 的委托方法来动态加载拇指并使用它们而无需为新拇指绑定事件侦听器。 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)

Answer 2

这是一个简单的 jquery 图片库！

$(document).ready(function(){
	$(".thumb").click(function() {
		var dir = $(this).attr("src");
		$('#image').hide();
		$('#image').fadeIn('fast');
		$('#image').attr("src",dir);
	});
});

#image{
border:4px #666 solid;
height:480px;
width:640px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" border="0"/>

<img src="http://www.981powerfm.com.au/images/stories/2014/09/happy_animal_5.jpg" class="thumb" width='100px' />
<img src="http://smartyvet.com/site/wp-content/uploads/2014/05/happy5.jpg" class="thumb" width='100px' />
<img src="http://www.telegram.ee/wp-content/uploads/2013/11/a.aaa-Happy-animals.jpg" class="thumb" width='100px' />