Lightbox Jquery點擊下一圖片

Question

我正在使用freewall和featherlight插件的混合來生成一個可以打開爲lightbox的響應式圖庫，但是，我試圖讓lightbox切換到下一個圖像時遇到以下問題（i + 1）點擊。 燈箱圖像代碼enter image description here。我想要做的是將img src更改爲i + 1，以便點擊下一張圖片。

我也有在Github上這個項目可能有助於理解：https://github.com/adamianniello/adamianniello.com/blob/master/B%C3%A6b%C3%A6l%C9%99n_Pasadena.html

\t \t <script type="text/javascript"> 
 

 
\t \t \t var temp = "<div class='brick' style='width:{width}px;'><a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>"; 
 
\t \t \t var w = 1, h = 1, html = '', limitItem = 54; 
 
\t \t \t for (var i = 0; i < limitItem; ++i) { 
 
\t \t \t \t w = 1 + 3 * Math.random() << 0; 
 
\t \t \t \t html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1).replace("{link}",i + 1); 
 

 
\t \t \t } 
 
\t \t \t $("#freewall").html(html); 
 

 
\t \t \t var wall = new Freewall("#freewall"); 
 
\t \t \t wall.reset({ 
 
\t \t \t \t selector: '.brick', 
 
\t \t \t \t animate: true, 
 
\t \t \t \t cellW: 150, 
 
\t \t \t \t cellH: 'auto', 
 
\t \t \t \t onResize: function() { 
 
\t \t \t \t \t wall.fitWidth(); 
 
\t \t \t \t } 
 
\t \t \t }); 
 

 
\t \t \t var images = wall.container.find('.brick'); 
 
\t \t \t images.find('img').load(function() { 
 
\t \t \t \t wall.fitWidth(); 
 
\t \t \t });

<div id="freewall" class="free-wall"></div>

Answer 1

您必須手動觸發點擊下一個元素的圖像。只要做下面的事情

一個函數來觸發featherlight顯示下一個圖像。我曾假設你使用.brick a css選擇器來初始化羽毛。隨意將其更改爲您所需的。此功能可以建立您的下一個a標籤data-featherlight，並在其上調用featherlight。

function showNextImage(i) { 
    $('.brick a').featherlight('i/jpl/' + (((i +1) % (limitItem + 1))) + '.jpg'); 
} 

在你的DIV添加onclick調用函數與當前i。

var temp = "<div class='brick' style='width:{width}px;' onclick='showNextImage({index})'> <a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>"; 
     var w = 1, h = 1, html = '', limitItem = 54; 
     for (var i = 0; i < limitItem; ++i) { 
      w = 1 + 3 * Math.random() << 0; 
      html += temp.replace(/\{width\}/g, w*150).replace("/\{index\}/g", i + 1).replace("{link}",i + 1); 

     } 
     $("#freewall").html(html);