如何在同一頁面上創建單獨的Fancybox圖庫？

我們使用jQuery 1.7.1和Fancybox 1.3.4。我是Fancybox的全新品牌。我從未在昨天之前使用過它，但它在我正在開發的網站上廣泛使用。建立Fancybox的人被終止了，因爲他......無關緊要。 :)如何在同一頁面上創建單獨的Fancybox圖庫？

我正在創建產品比較頁面。多達四個產品將顯示在一個頁面上。每個產品最多可以有五個特定於該產品的圖像。

目前，當我單擊任何圖像時，Fancybox會彈出並打開頁面上所有圖像的圖庫。所以，如果我有一個有五個圖像的產品，那麼有一個五個圖像庫。如果我有四個產品和五個圖像，則有一個有二十個圖像的圖庫。這對我來說不太合適。

我想要的是每個產品都有自己的畫廊。如果他們點擊產品A，他們只會看到與產品A相關聯的圖像。如果他們點擊產品B ...，您可以看到它。

如何讓Fancybox在單個頁面上創建單獨的畫廊？

編輯

目前，我的rel屬性設置爲 'autoGallery'。下面一個問題的答案的建議，我將其更改爲這樣的事情，這會產生什麼樣的我要找：

<img rel='Gallery1'> 
<img rel='Gallery1'> 
<img rel='Gallery2'> 
<img rel='Gallery2'> 
<img rel='Gallery3'> 
<img rel='Gallery3'>

如果我改變相對屬性，除了「autoGallery」什麼，點擊圖片只是將圖像打開到新窗口。

來源

2012-02-28 Evik James

你不分享你的js代碼，但我認爲你的fancybox自定義腳本看起來像'$（「一[相對= autoGallery]「）。fancybox（）;'這就是爲什麼如果你改變'rel'屬性的值不會工作。請在下面的答案中查看我的評論。 – JFK 2012-02-29 18:40:34

不同rel屬性只分配到每家畫廊

<a class="fancybox" rel="gallery01" href="product01/image01.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image02.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image03.jpg">one</a> 
<a class="fancybox" rel="gallery01" href="product01/image04.jpg">one</a> 

<a class="fancybox" rel="gallery02" href="product02/image01.jpg">two</a> 
<a class="fancybox" rel="gallery02" href="product02/image02.jpg">two</a> 
<a class="fancybox" rel="gallery02" href="product02/image03.jpg">two</a> 

<a class="fancybox" rel="gallery03" href="product03/image01.jpg">three</a> 
<a class="fancybox" rel="gallery03" href="product03/image02.jpg">three</a> 
<a class="fancybox" rel="gallery03" href="product03/image03.jpg">three</a>

...他們都可以使用相同的腳本：

$(".fancybox").fancybox();

來源

2012-02-28 17:56:13 JFK

我認爲這是我正在尋找的答案。直到明天我都無法嘗試，但聽起來很棒！ – 2012-02-28 18:30:51

不，它不適合我。我已經有一個rel屬性。它的價值是'autoGallery'。如果我將其更改爲其他任何內容，則每個圖像只會加載到新窗口中。 – 2012-02-29 18:27:14

很可能是因爲你的fancybox腳本看起來像'$（「a [rel = autoGallery]」）。fancybox（）;'但是如果你添加'class =「fancybox」'給每個鏈接並使用腳本'$（「。fancybox」）。fancybox（）;'然後它會起作用 – JFK 2012-02-29 18:36:10

我曾與3的fancybox同樣的問題 - 使用rel="gallery"和data-fancybox-group="gallery"沒有工作。

發現這個codepen /撥弄，使得它的工作，通過增加.attr('data-fancybox', 'gallery');

https://codepen.io/anon/pen/EwpOxE?editors=1010

來源

2018-01-30 10:04:52

您的CodePen示例不起作用。所有3張縮略圖打開了相同的畫廊 – Brad 2018-02-08 21:45:15

如何在同一頁面上創建單獨的Fancybox圖庫？

回答

相關問題