gọi thư viện fancybox với liên kết khác

Question

Tôi có hoàn cảnh khá độc đáo. Đây là kịch bản của tôi: 4 hình thu nhỏ liên kết tới thư viện + 1 hình ảnh trung bình (trỏ đến cùng nguồn với hình thu nhỏ đầu tiên). Tôi muốn mở cùng một thư viện bằng cách nhấp vào hình ảnh trung bình, nhưng khi tôi liên kết chúng với thuộc tính "rel" tôi có hình ảnh đầu tiên hai lần trong vòng lặp (5 hình ảnh lớn trong vòng lặp). Có cách nào để gọi thư viện fancybox được chỉ định trong liên kết bên ngoài không? Bằng cách đó tôi có thể kích hoạt chức năng bấm vào hình ảnh trung bình và vẫn chỉ có 4 hình ảnh lớn trong vòng lặp. Xin vui lòng giúp đỡ, tôi không thể tìm thấy giải pháp cho việc này.

CẬP NHẬT

đây là html của tôi

<div class="details_gallery"> 
<a href="max/1.jpg" class="fancybox"><img src="mid/1.jpg" /></a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

Tôi muốn kích hoạt các "chi tiết" bộ sưu tập khi nhấp vào "giữa" hình ảnh ...

Answer 1

Những gì tôi sẽ làm gì là sửa đổi liên kết của hình ảnh "giữa" để kích hoạt thư viện onclick mà không phải là một phần của thư viện như:

<a href="max/1.jpg" onclick="$('a.fancybox').eq(0).trigger('click'); return false;"><img src="mid/1.jpg" alt="mid image" /></a> 

phương thức .eq() đảm bảo rằng thư viện bắt đầu từ hình ảnh đầu tiên vì nếu không nó sẽ bắt đầu từ phần tử cuối cùng được gắn vào hộp ưa thích. Bạn có thể chỉ định để bắt đầu từ một phần tử khác của thư viện.

Answer 2

<div class="details_gallery"> 
<a href="#" class="manualfancybox">Manual Call Fancybox</a> 
<div class="details_gallery_min"> 
    <a rel="details" href="max/1.jpg" class="fancybox"><img src="min/1.jpg" alt="" /></a> 
    <a rel="details" href="max/2.jpg" class="fancybox"><img src="min/2.jpg" alt="" /></a> 
    <a rel="details" href="max/3.jpg" class="fancybox"><img src="min/3.jpg" alt="" /></a> 
    <a rel="details" href="max/4.jpg" class="fancybox"><img src="min/4.jpg" alt="" /></a> 
</div> 
</div> 

<script> 

$(document).ready(function(){ 
    $(".manualfancybox").click(function() { 
     var photos = new Array(); 

     $(".details_gallery_min a").each(function(){ 

      href = $(this).attr("href"); 
      title = $(this).attr("title"); 
      photos.push({'href': href, 'title': title})   

     }); 

     jQuery.fancybox(photos , 
      { 'transitionIn' : 'elastic', 
       'easingIn' : 'easeOutBack', 
       'transitionOut' : 'elastic', 
       'easingOut' : 'easeInBack', 
       'opacity' : false, 
       'titleShow' : true, 
       'titlePosition' : 'over', 
       'type'    : 'image',   
       'titleFromAlt' : true 
      } 
     ); 
    }); 
}); 

</script>