Fancybox在多個相冊中循環播放

Question

我發現此問題未在Google網上論壇中回答，我在Fancybox中遇到同樣的問題。

我在一個頁面上有更多的圖像畫廊。當我用下一個prev按鈕去下一個圖像 ，等等，我會看到 其他畫廊的圖像。

隨着收藏有可能做這樣的事情：

<a href="url" rel="fancybox[gallery1]" >link</a> 

，我會得到所有從 gallery1圖像在圖像畫廊。我的相冊是動態的，所以我不能在我的JavaScript文件中使用 。

這可能嗎？

我們如何控制此導航？

<div class="Album" /> 
<div class="AlbumImg"> 
    <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a> 
    <div id="Gallery0"> 
     <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo1"></a> 
    </div> 
    <div id="Gallery0"> 
    <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo2"></a> 
    </div> 
    <div id="Gallery0"> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery0" href="Tokyo3.jpg"></a> 
    </div> 
    <img class="first" src="Tokyo" title="Tokyo" /> 
    </a> 
</div> 

<div class="AlbumImg"> 
    <a class="big_img" title="Tokyo" rel="flickr_group" href="tokyo.jpg"></a> 
    <div id="Gallery1"> 
     <a class="big_img" title="Tokyo rel="flickr_group" href=""Tokyobig></a> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo1"></a> 
    </div> 
    <div id="Gallery1"> 
    <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo2"></a> 
    </div> 
    <div id="Gallery1"> 
     <a class="grouped_elements" title="Tokyo" rel="Gallery1" href="Tokyo3.jpg"></a> 
    </div> 
    <img class="first" src="Tokyo" title="Tokyo" /> 
    </a> 
</div> 

這是我所擁有的代碼，每張專輯都有一些圖片。當我打開第一張專輯的最後一張圖片並導航時，我會看到第二張專輯的第一張圖片。但我想回到同一個abum的第一個圖像

Answer 1

<a class="grouped_elements" rel="gallery-x" href="Tokyo3.jpg"> 

這應該工作？不要忘記' - '
如果它可以工作，你能提供jQuery代碼嗎？

Answer 2

您粘貼的代碼包含了很多錯誤的...

您有多個div的具有相同id，並且屬性不包含引號內，在這兩個<div class="AlbumImg">有一個無與倫比的閉幕標籤</a>。我不太確定這些對你的例子有什麼影響，但你一定要注意它。而魯賓說，fancybox應該與rel屬性一起工作，就像燈箱。

您的代碼應該是這個樣子：

<div class="albums"> 
    <div class="gallery1"> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery1"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
    </div> 
    <div class="gallery2"> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
     <a href="http://placehold.it/350x150.png" rel="gallery2"> 
      <img alt="" src="http://placehold.it/150x150.png"/> 
     </a> 
    </div> 
</div> 

如果你想讓你的畫廊週期，你必須一個參數傳遞給的fancybox。請參閱documentation。應該看起來像這樣：

$(document).ready(function() { 
     $('a').fancybox({ 
      'cyclic':true 
     }); 
});