將Lighbox圖像變成幻燈片

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(); 
});