[英]simple jquery image gallery
我有一个简单的jquery图库。 当用户点击拇指时,它会在主Image的src属性中将'thumb'替换为'large',我使用jQuery的delegate方法动态加载Thumb并使用它们而不使用bind事件监听器来获取新的Thumb。 的jsfiddle
现在我需要能够链接到库中的特定图像,例如example.com/gallery.php#3rdimage
这样用户将立即看到库中的第3个图像,类似于engadget使用http的方法://www.engadget.com/photos/samsung-series-5-chrome-os-laptop-vs-11-inch-macbook-air-fight/#4128000
只需获取页面的哈希值并将其用作对齐拇指的索引:
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 (最初会显示第3张图片)
要在浏览图像时向URL添加哈希值,以便为共享某个图像准备URL,更改#largeImage
后它只是一个额外的行:
window.location.hash = $('#thumbs img').index(this)+1;
演示: jsfiddle.net/EbCKN/1/show/ ( 编辑 )
这是一个简单的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' />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.