我正在为我的画廊使用lightbox.js。当我们单击网页上的任何图像时,灯箱将弹出,然后单击“下一步”按钮,将出现下一幅图像。我的要求不是下一个按钮,而是要放置下一个图像的缩略图。请帮忙。
lightbox2-master
我正在使用的上述灯箱。以下是我用于图库的代码。
https://lokeshdhakar.com/projects/lightbox2/
<h3>A Four Image Set</h3>
<div class="divBox">
<a class="example-image-link" href="images/image-1.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="images/thumb-1.jpg" alt="" data-navipicture="images/thumb-2.jpg"/></a></div>
<div class="divBox">
<a class="example-image-link" href="images/image-2.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="images/thumb-2.jpg" alt="" data-navipicture="images/thumb-3.jpg" /></a>
</div>
<div class="divBox">
<a class="example-image-link" href="images/image-3.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="images/thumb-3.jpg" alt="" data-navipicture="images/thumb-4.jpg" /></a>
</div>
<div class="divBox">
<a class="example-image-link" href="images/image-4.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="images/thumb-4.jpg" data-navipicture="images/thumb-1.jpg" alt="" /></a>
</div>
()!
<script>
$(".example-image").click(function() {
$(".lb-next").empty();
var img_type = $(this).attr("src");
var imgNavPict = $(this).attr("data-navipicture");
alert("Value NaviPic : " +imgNavPict);
$("<img src='" + imgNavPict + "' class='navPicThumb' /></a>").appendTo(".lb-next");
});
$(".lb-container").click(function() {
$(".lb-next").empty();
var img_type = $(this).attr("src");
var imgNavPict = $(this).attr("data-navipicture");
alert("Value NaviPic : " +imgNavPict);
$("<img src='" + imgNavPict + "' class='navPicThumb' /></a>").appendTo(".lb-next");
});
</script>
运行html后,点击任意缩略图,就会打开一个带有缩略图的灯箱。但是,当我单击缩略图时,它将显示下一张图像,但是缩略图图像没有变化。
在灯箱上的下一个按钮缩略图上寻求帮助,也希望获取下一个缩略图的更新。