使用其他链接调用fancybox图库

Question

我有一个独特的情况。以下是我的情景： 4个缩略图链接到画廊+1张中等大小的图像（指向与第一个缩略图相同的源）。我想通过单击中等图像打开相同的画廊，但当我使用“rel”属性将它们链接时，在循环中会有两次出现第一张图片（5个大图像在循环中）。是否有一种方法可以在外部链接中调用指定的fancybox画廊？这样我就可以触发中等图像上的单击函数，同时在循环中仍然只有4个大图像。请帮忙，我找不到解决方法。

更新：

这是我的html。

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

当单击“mid”图像时，我希望触发“details”图库...

- lokers

Answer 1

我的做法是修改"mid"图片的链接，以触发图库的onclick事件，而不是将其作为图库本身的一部分，如下所示：

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

.eq()方法确保了画廊从第一张图片开始，否则它将从绑定到fancybox的最后一个元素开始。您可以指定从画廊的另一个元素开始。

- JFK

---

谢谢，我需要它，你用 alt="mid image" 做什么？ - Sven van den Boogaart

@SvenB alt="mid image" 只是图片描述，关于您正在显示的图像的一些有意义的信息，这将帮助残疾人士使用屏幕阅读器... 这只是一个示例，因为我不喜欢留下带有该属性的 <img> 标签以进行验证。 - JFK

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>

- Cristiano G Carvalho