Question

我正在创建一个网站。在这个网站上，我使用的是我用过多年的Lightbox脚本。它简单，负载快，我从来没有投诉。现在，这个客户想要点击图像的东西，灯箱中弹出较大的图像，你需要能够左右循环。

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

我是否可以添加到灯箱脚本中以使其循环到下一个大图像？

您可以在此处查看灯箱脚本： - 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();
});

将Lightbox图像转换为幻灯片

1 个答案: