灯箱上的下一个按钮中的缩略图

时间:2019-07-10 11:40:49

标签: lightbox bootstrap-lightbox

我正在为我的画廊使用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后,点击任意缩略图,就会打开一个带有缩略图的灯箱。但是,当我单击缩略图时,它将显示下一张图像,但是缩略图图像没有变化。

在灯箱上的下一个按钮缩略图上寻求帮助,也希望获取下一个缩略图的更新。

0 个答案:

没有答案