уменьшенное изображение в следующей кнопке на лайтбоксе - PullRequest
Новая
       27

уменьшенное изображение в следующей кнопке на лайтбоксе

0 голосов
/ 10 июля 2019

Я использую 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, щелкните любой эскиз, чтобы открыть лайтбокс с миниатюрой.Но когда я нажимаю на изображение, оно показывает следующее изображение, а изображение не меняется.

Обращаясь за помощью к миниатюре следующей кнопки на лайтбоксе, также хотите получить обновление следующей миниатюры.

...