在一張img和jQuery img src更改上使用fancybox rel = group

Question

關於fancybox我有一個非常具體的問題。 我的標記如下所示：

<a id="fancy_link" class="fancybox" href="image.jpg" rel="group"> 
  <img id="image" src="image.jpg" style="height: 500px;">
</a> 

這是到目前為止效果很好的一張圖片。 但是由於我有很多圖像（200），所以我想進行分組，並且不想在標記中對每個圖像進行硬編碼，因此我使用了一個簡單的jQuery函數：

function changeImg(e, f) {
  $('#fancy_link').attr('href', e[f].img);
  $("#image").attr('src', e[f].img);
}

e和f是它們保存在一個Array對象namend圖像鏈接.img

所以我現在的問題是，如果您知道我該如何處理，即使在標記中只有一個<img>元素，fancybox也會創建組元素，並且當我單擊附帶的prev和next按鈕時，它將遍歷所有圖像的fancybox。

Answer 1

在您發表評論之一后，我明白了您的意思。 那將很奇怪，如果您不了解此代碼並對其進行研究，那將是一件不可思議的事情。 我假設您只想顯示第一個：

<div>
   <img src="1.jpg" alt="img1" rel="group1" />
   <img src="2.jpg" alt="img2" rel="group1" />
   <img src="3.jpg" alt="img3" rel="group1" />
   <img src="4.jpg" alt="img4" rel="group1" />
   <img src="5.jpg" alt="img5" rel="group1" />
</div>


div img{ display: none; }
div img:nth-child(1){ display: inline-block;}

這段代碼使其他用戶有了更多的感覺。 這里的優點是所有圖像都會預加載。 這里的缺點是所有圖像都將預加載（我知道是兩倍）。 您有大量的圖像，這可能會占用用戶帶寬。

---

如果所有路徑都位於數組中圖像的頂部，則可以執行以下操作：

$.each(imageArr, function(key,image){
    $img = $( document.createElement('img') );
    $img[0].src = image.img; // img is the key in the object
    $('div').append($img);
})

這有點復雜，可能會使事件處理復雜化，但是您確實可以更好地控制要加載的圖像。 您可以將其更改為一次加載兩個，然后執行下一個