用於下一個和上一個功能的組fancybox項目

Question

因此，fancybox插件在我的網站上工作，但僅適用於單張圖像，所以我無法在它們之間滾動，或使用next-prev按鈕切換。我知道fancybox需要看到這個組來啓用它，但是我被卡在這裏，仍然只能得到單個圖像。這裏是我的jQuery代碼片段和HTML結構：

非常感謝您的幫助。

$('dl.gallery-item').each(function(index) { 
    var rel = "group"; // +$(this).attr('id'); 
    $('.gallery-item a').addClass('fancybox').attr('rel', rel); 

}); 
$('.fancybox').fancybox(); 

<div id="gallery-1" class="gallery galleryid-15 gallery-columns-4 gallery-size-thumbnail"> 
     <dl class="gallery-item"> 
      <dt class="gallery-icon landscape"> 
       <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a> 
      </dt></dl><dl class="gallery-item"> 
      <dt class="gallery-icon landscape"> 
       <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a> 
      </dt></dl><dl class="gallery-item"> 
      <dt class="gallery-icon landscape"> 
       <a href="//localhost:3000/path-to-image" class="fancybox" rel="group"><img width="253" height="164" src="path-to-image" class="attachment-thumbnail size-thumbnail" alt=""></a> 
      </dt> 
     </dl> 
</div> 

Answer 1

這是你的HTML與工作的fancybox實現：
https://jsfiddle.net/alan0xd7/z3h8zf65/

這是使用最新版本的fancybox 3.0.47

基本上是唯一的變化，而不是使用rel，它是data-fancybox適用於團體。

如果你不能工作，編輯我的小提琴，並顯示你的代碼看起來像什麼。

希望這會有所幫助！