我的画廊有缩略图,所有缩略图都有相同名称的相应较大图像,我使用php动态地将每个拇指链接到其较大的图像。然后我使用jQuery使用href属性显示更大的图像,以获得大图像的路径。当灯箱弹出,然后点击它时,它应该允许我浏览并查看每个图像,而不是只有当它转到下一个图像时才点击下一个图像,但如果再次点击它,它会显示相同的图像。
我附上图片以提供基本想法,因为我不善于解释。
我的图库中动态加载的缩略图:
当点击图库中的最后一个拇指时,会弹出(建筑物的图片):
当点击下一张照片时,这张照片(破裂的泡泡)会被曝光,但是当下次点击几次时,这张照片(破裂的泡泡)仍然存在:
我的代码:
var Picture = $('.lightbox'); // path to full sized picture the class lightbox identifies a link <a>
var pic = Picture.index(this) //finds index
var num = Picture.length;//finds the total amount of thumbnails
$('#next').click(function(e){ //when next is click prevent default
e.preventDefault();
if(pic<(num-1)){
var ntx = (pic)+1;
}
if(pic == (num-1)){
ntx= 0;
}
var nxt = Picture[ntx];
var img = $('.box img');
img.remove();
$('.box').hide(); // removes the current image
$('.box').append('<img align="center" id="motown" src="'+nxt+'" style=" z-index:52px;" > '); //appends the next image and sets the div container to hidden and hide the new image
});
我可以在代码中添加什么来使下一个按钮每次都能正常工作?
答案 0 :(得分:0)
尝试为同一组中的所有图片添加相同的rel,这就是我如何做到的
<a href="first_img.jpg" rel="lightbox[mygroup]">Trigger Text or Image Tag</a>
<a href="second_img.jpg" rel="lightbox[mygroup]"></a>
<a href="third_img.jpg" rel="lightbox[mygroup]"></a>
<a href="forth_img.jpg" rel="lightbox[mygroup]"></a>
<a href="fifth_img.jpg" rel="lightbox[mygroup]"></a>