Làm cách nào để tạo các phòng trưng bày Fancybox riêng biệt trên cùng một trang?

Question

Chúng tôi đang sử dụng jQuery 1.7.1 và Fancybox 1.3.4. Tôi là người mới đến Fancybox. Tôi chưa bao giờ sử dụng nó trước ngày hôm qua, nhưng nó được sử dụng rộng rãi trên một trang web mà tôi đang làm việc. Người thiết lập Fancybox đã bị chấm dứt vì anh ta ... không liên quan. :)

Tôi đang tạo trang so sánh sản phẩm. Tối đa bốn sản phẩm sẽ hiển thị trên một trang. Mỗi sản phẩm có thể có tối đa năm hình ảnh cụ thể cho sản phẩm đó.

Hiện tại, khi tôi nhấp vào bất kỳ hình ảnh nào, Fancybox bật mở và tạo một thư viện gồm tất cả các hình ảnh trên trang. Vì vậy, nếu tôi có một sản phẩm có năm hình ảnh, có năm thư viện hình ảnh. Nếu tôi có bốn sản phẩm với năm hình ảnh, có một bộ sưu tập với hai mươi hình ảnh. Điều này không hiệu quả với tôi.

Điều tôi muốn là cho mỗi sản phẩm có thư viện riêng. Nếu họ nhấp vào Sản phẩm A, họ sẽ chỉ thấy các hình ảnh được liên kết với Sản phẩm A. Nếu họ nhấp vào Sản phẩm B ... bạn nhận được nó.

Làm cách nào để tạo Fancybox tạo các thư viện riêng biệt trên một trang?

EDIT

Hiện nay, thuộc tính rel của tôi được thiết lập để 'autoGallery'. Một trong những câu trả lời dưới đây đề nghị tôi thay đổi nó thành một cái gì đó như thế này, mà sẽ tạo ra những gì tôi đang tìm kiếm:

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

Nếu tôi thay đổi các thuộc tính rel để bất cứ điều gì ngoại trừ 'autoGallery', nhấp vào hình ảnh chỉ mở hình ảnh vào một cửa sổ mới.

Answer 1

Chỉ cần gán một rel thuộc tính khác nhau cho mỗi bộ sưu tập

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

... và tất cả họ đều có thể sử dụng cùng một kịch bản:

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

Answer 2

tôi đã có vấn đề tương tự với Fancybox 3 - sử dụng rel="gallery" và data-fancybox-group="gallery" không hoạt động.

Tìm thấy codepen này/fiddle khiến nó hoạt động, bằng cách thêm .attr('data-fancybox', 'gallery');

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