用其他链接调用fancybox画廊 [英] calling fancybox gallery with other link

问题描述

我的处境非常独特。这是我的情况：
4个链接到图库的缩略图+ 1个中型图像（指向与第一个缩略图相同的来源）。我想通过单击中等图像来打开同一图库，但是当我将它们与 rel属性链接时，循环中会有第一张图片两次（循环中有5张大图像）。有没有办法在外部链接中调用指定的fancybox画廊？这样，我可以在中等图像上触发单击功能，但循环中仍然只有4个大图像。请帮忙，我找不到解决方案。

I have quite unique situation. Here is my scenario: 4 thumbnails linking to the gallery + 1 medium image (pointing to the same source as first thumbnail). I would like to open the same gallery by clicking on the medium image, but when I link them with "rel" attribute I have the first picture twice in the loop (5 big images in the loop). Is there a way to call specified fancybox gallery within external link? That way I could trigger click function on the medium image and still have only 4 big images in the loop. Please help, I cannot find solution for this.

更新

这是我的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> 

我想在单击中图像时触发详细信息图库...

I want to trigger the "details" gallery when clicking on the "mid" image...

推荐答案

我要做的是修改 mid 图像的链接以触发图库 onclick 却不属于图库本身：

What I would do is to modify the link of the "mid" image to trigger the gallery onclick without being part of the gallery itself like:

<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的最后一个元素开始。不过，您可以指定从图库的另一个元素开始。

the .eq() method ensures that the gallery starts from the first image because otherwise it would start from the last element bound to fancybox. You could specify to start from another element of the gallery though.

这篇关于用其他链接调用fancybox画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！