自定义灯箱，下一步按钮不会多次工作

Question

我的图库有缩略图，上面都有相同名称的相应大图，我用php动态链接每个拇指到它的大图上。然后，我使用jQuery使用href属性显示较大的图像，以获得指向较大图像的路径。当lightbox弹出并单击next时，它应该允许我浏览并查看每个图像，而当next仅单击一次时，它会转到下一个图像，但如果再次单击next，则会显示相同的图像。

我附上图片给出一个基本的想法，因为我不太擅长解释。

我的图库中动态加载的缩略图：

​

当单击图库中的最后一个拇指时，将弹出(建筑物的图片)：

​

当点击next时，这张照片(破裂的气泡)被显示，但是当多次点击next时，这张照片(破裂的气泡)仍然存在：

​

我的代码：

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


    });

我可以在我的代码中添加什么来使next按钮每次都能工作？

Answer 1

尝试将相同的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>