點擊下一張圖片的Lightbox Jquery

Question

我混合使用了Freewall和Featherlight插件來生成一個響應式畫廊，該畫廊可以打開到燈箱中，但是，在嘗試讓燈箱單擊時切換到下一個圖像（i + 1）時，我遇到了以下問題。 燈箱圖片代碼在此處輸入圖片說明 。 我要做的是將img src更改為i +1，這樣單擊后它將轉到下一張圖像。

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

  <script type="text/javascript"> 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>"; 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}", i + 1).replace("{link}",i + 1); } $("#freewall").html(html); var wall = new Freewall("#freewall"); wall.reset({ selector: '.brick', animate: true, cellW: 150, cellH: 'auto', onResize: function() { wall.fitWidth(); } }); var images = wall.container.find('.brick'); images.find('img').load(function() { wall.fitWidth(); }); 

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

Answer 1

單擊圖像后，您必須手動觸發下一個元素。 只是做下面的事情

觸發羽毛燈以顯示下一張圖像的功能。 我假設您使用.brick a CSS選擇器來初始化.brick a 。 隨意將其更改為您想要的。 此函數將為您的下a標簽建立data-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);