jquery - 将 Lightbox 图像转换为幻灯片

Question

我正在创建一个网站。在这个网站上，我使用了多年以来使用的相同 Lightbox 脚本。它简单，加载速度快，我从来没有抱怨过。现在，这个客户想要一些你点击图片的地方，更大的图片在灯箱中弹出，你需要能够左右循环。

http://holidaylettingsbulgaria.co.uk/rentone.html

有什么我可以添加到灯箱脚本中以使这个循环到下一个大图像吗？

您可以在此处查看 Lightbox 脚本：- http://codepen.io/studiowebmedia/pen/kFchr

Answer 1

例如，您可以添加“下一个”和“上一个”链接并模拟单击下一个/上一个图像：

<ul>
  <li><a href="#" class="lightbox">Photo 1</a></li>
  <li><a href="#" class="lightbox">Photo 2</a></li>
  <li><a href="#" class="lightbox">Photo 3</a></li>
  <li><a href="#" class="lightbox">Photo 4</a></li>
</ul>

<div id="menu" style="display:none;">
  <a href="#" id="prev">&laquo; Prev</a>
  <a href="#" id="next">Next &raquo;</a>
</div>


$('.lightbox').click(function(){
   $('.lightbox').removeClass("active");
   $(this).addClass("active");

   $('#menu').show();
});
$('#next').click(function(){
    var img_index = $('.lightbox.active').index('.lightbox')+1;

    if($('.lightbox:eq('+img_index+')').size()==0) $('.lightbox:first').click();
    else $('.lightbox:eq('+img_index+')').click();
});

$('#prev').click(function(){
    var img_index = $('.lightbox.active').index('.lightbox')-1;

    if(img_index<0) $('.lightbox:last').click();
    else $('.lightbox:eq('+img_index+')').click();
});