Aynı sayfada ayrı Fancybox galerileri nasıl oluşturulur?

jQuery 1.7.1 ve Fancybox 1.3.4 kullanıyoruz. Fancybox için yeni bir markayım. Daha önce hiç kullanmamıştım, ama üzerinde çalıştığım bir sitede yaygın olarak kullanılıyor. Fancybox'ı kurmuş olan kişi sonlandırıldı çünkü ... ... alakasızdı. :)Aynı sayfada ayrı Fancybox galerileri nasıl oluşturulur?

Ürün karşılaştırma sayfası hazırlıyorum. Tek bir sayfada en fazla dört ürün gösterilecektir. Her ürün, bu ürüne özgü beşe kadar görüntü içerebilir.

Herhangi bir resmin üzerine tıkladığımda, Fancybox açılır ve sayfadaki tüm görüntülerin bir galerisini oluşturur. Yani, beş görüntülü bir ürünüm varsa, beş tane resim galerisi var. Beş resim içeren dört ürünüm varsa, yirmi resimli bir galeri var. Bu benim için iyi çalışmıyor.

Her ürün için kendi galerisine sahip olmak istiyorum. Ürün A'yı tıklarsa, yalnızca Ürün A ile ilişkili görüntüleri göreceklerdir. Ürün B'yi tıklarlarsa ... bunu alırsınız.

Fancybox'ın tek bir sayfada ayrı galeriler oluşturmasını nasıl sağlayabilirim?

DÜZENLEME

Şu anda, benim rel özelliği 'autoGallery' olarak ayarlanır. yanıtlardan biri aşağıda ben ne arıyorum üretecektir olduğu buna benzer bir şeyle değiştirmek önerdi: resmin üzerine tıklayarak, ben 'autoGallery' haricinde herhangi bir şey için rel özelliğini değiştirirseniz

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

sadece görüntüyü yeni bir pencereye açar.

kaynak

2012-02-28 Evik James

ekleyerek, o iş yapılmış bu codepen/keman bir [rel = autoGallery] "). fancybox();' ve 'rel' özniteliğinin değerini değiştirirseniz çalışmaz bu yüzden. Cevabım altındaki yorumumu aşağıya bakın. – JFK

Hemen her galerinin

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

farklı rel niteliği atamak ... ve hepsi aynı komut dosyasını kullanabilirsiniz: Ben Fancybox 3 ile aynı sorunlar vardı

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

kaynak

2012-02-28 17:56:13 JFK

Sanırım aradığım cevap bu. Yarına kadar deneyemem ama harika görünüyor! –

Hayır, benim için çalışmıyor. Zaten bir rel özniteliğim var. Bu değer 'autoGallery'. Onu başka bir şeye değiştirirsem, her görüntü yeni bir pencerede yüklenir. –

büyük olasılıkla fancybox betiği '$ (" a [rel = autoGallery] ") gibi görünüyor. Fancybox();' ancak her bağlantıya 'class =" fancybox "' eklerseniz ve yukarıdaki betiğimde olduğu gibi betiği kullanın '$ (". fancybox ") fancybox();' o zaman – JFK

- rel="gallery" kullanarak ve data-fancybox-group="gallery" çalışmadı.

Bulunan Eğer js kodunu paylaşmıyorsunuz ama "(senin fancybox Özel komut dosyası $` benziyor varsayalım .attr('data-fancybox', 'gallery');

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

kaynak

2018-01-30 10:04:52

CodePen örneğiniz çalışmıyor. Tüm 3 küçük resim aynı galeriyi açıyor – Brad

Aynı sayfada ayrı Fancybox galerileri nasıl oluşturulur?

cevap

İlgili konular