2016-09-02 99 views
0

我使用fancyBox,您將圖像包裝在<a>中,當您點擊它們時,它們會放大。但是,您似乎也可以導航到上一張下一張圖片。在我的應用程序中,我有面板,所以我希望能夠導航到第一個面板的圖像,但我做的是而不是希望能夠從第一個面板的最後一個圖像導航到第一個面板的第一個圖像第二個小組。瀏覽圖像

有沒有辦法做到這一點?

<!-- in the first panel --> 
<a class="fancybox" rel="group" href="img0"><img src="img0"/></a> 
<a class="fancybox" rel="group" href="img1"><img src="img1"/></a> 

<!-- in the second panel --> 
<a class="fancybox" rel="group" href="img2"><img src="img2"/></a> 
<a class="fancybox" rel="group" href="img3"><img src="img3"/></a> 

我不希望能夠從「img1」導航到「img2」,該怎麼做?


我想rel會有所幫助,但在第二個面板將其設置爲一個隨機名稱似乎並沒有使的伎倆!

回答

1

從Fancbox website,你應該組rel屬性的畫廊:

注 - 畫廊是從誰具有相同的 「相對」 的標籤,例如元素創建:

/* HTML */ 
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a> 

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */ 

$("a.grouped_elements").fancybox();