Jak utworzyć osobne galerie Fancybox na tej samej stronie?

Używamy jQuery 1.7.1 i Fancybox 1.3.4. Jestem nowy w Fancybox. Nigdy wcześniej go nie używałam, ale jest szeroko stosowany na stronie, nad którą pracuję. Osoba, która założyła Fancybox została rozwiązana, ponieważ był ... nieistotny. :)Jak utworzyć osobne galerie Fancybox na tej samej stronie?

Tworzę stronę porównania produktów. Na jednej stronie będzie wyświetlanych do czterech produktów. Każdy produkt może mieć maksymalnie pięć obrazów charakterystycznych dla tego produktu.

Obecnie, po kliknięciu dowolnego obrazu, Fancybox otwiera się i tworzy galerię wszystkich obrazów na stronie. Tak więc, jeśli mam jeden produkt z pięcioma obrazami, jest tam pięć galerii obrazów. Jeśli mam cztery produkty z pięcioma obrazami, jest jedna galeria z dwudziestoma obrazami. To nie działa dobrze dla mnie.

Chcę, aby każdy produkt posiadał własną galerię. Jeśli klikną Produkt A, zobaczą tylko obrazy powiązane z produktem A. Jeśli klikną na Produkt B ... otrzymasz go.

Jak mogę sprawić, aby Fancybox tworzył oddzielne galerie na jednej stronie?

EDIT

Obecnie mój atrybut rel jest ustawiony na 'autoGallery'. Jedną z odpowiedzi poniżej zasugerował, że mogę go zmienić na coś takiego, które będzie produkować co szukam:

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

Gdybym zmienić atrybut rel do niczego z wyjątkiem „autoGallery”, klikając na obrazek po prostu otwiera obraz w nowym oknie.

Źródło

2012-02-28 Evik James

nie dzielą swój kod js ale zakładam, że fancybox niestandardowy skrypt wygląda '$ (" a [rel = autoGallery] "). fancybox();" i dlatego nie zadziała, jeśli zmienisz wartość atrybutu "rel". Zobacz mój komentarz w mojej odpowiedzi poniżej. – JFK

Wystarczy przypisać inny atrybut rel każdej galerii

<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>

... i wszystkie mogą korzystać z tego samego skryptu:

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

Źródło

2012-02-28 17:56:13 JFK

Myślę, że to jest odpowiedź, której szukałem. Nie mogę tego wypróbować do jutra, ale brzmi świetnie! –

Nie, to nie działa dla mnie. Mam już atrybut rel. Jego wartość to "autoGallery". Jeśli zmienię to na cokolwiek innego, każdy obraz zostanie załadowany w nowym oknie. –

najprawdopodobniej dlatego, że skrypt fancybox wygląda jak '$ (" a [rel = autoGallery] "). Fancybox();' ale jeśli dodasz 'class =" fancybox "' do każdego linku i użyje skryptu jak w mojej odpowiedzi powyżej '$ (". fancybox "). fancybox();' następnie zadziała – JFK

miałem te same problemy z Fancybox 3 - używając rel="gallery" i data-fancybox-group="gallery" nie działa.

Znaleziony to codepen/skrzypce, które sprawiły, że działa, dodając .attr('data-fancybox', 'gallery');

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

Źródło

2018-01-30 10:04:52

Twój przykład CodePen nie działa. Wszystkie 3 miniatury otwierają tę samą galerię – Brad

Jak utworzyć osobne galerie Fancybox na tej samej stronie?

Odpowiedz

Powiązane problemy