Question

我使用fancyBox（http://fancyapps.com/fancybox/）来显示带有缩略图的图库，但我的画廊总是以最后一个元素开头

{% for pic in property.media.galleryHasMedias %}
  <a class="fancybox-img" href="{% path pic.media, 'reference' %}" rel="gallery" title="image bien">
    {% thumbnail pic.media, 'big' %}
   </a>                
{% endfor %}

这是我的JS代码：

$(".fancybox-img").fancybox({
        helpers : {
            title: null,
            thumbs  : {
                width   : 108,
                height  : 72
            },
            overlay : {
                css : {
                    'width' : '900px',
                    'height' : '675px',
                    'background' : 'rgba(20, 20, 20, 0.9)'
                }
            }
        },
        index: 2,
        prevEffect  : 'none',
        nextEffect  : 'none',
        beforeClose : function(){
            $("#tabs li:first-child a").trigger('click');
        }
    }).trigger('click');

强制fancybox的任何想法都以我的第一张图片开头？

这里是小提琴:) http://jsfiddle.net/willwill/NLbs8/6/

Answer 1

关于正在发生的事情的一点解释：

执行此操作时：

$(".fancybox-img").fancybox();

...将fancybox绑定到类fancybox-img

的所有元素

好的我知道，但它是如何运作的？

该脚本查找具有类fancybox-img的第一个元素，并将其绑定到fancybox
然后，它找到第二个并将其绑定到fancybox
依此类推......直到找到最后一个元素并将其绑定到fancybox

......听起来很明显你可能会想，但是，当你这样做时：

$(".fancybox-img").fancybox().trigger("click");

...因为你链接了两个方法，脚本实际上做的是：

找到第一个元素，将其绑定到fancybox然后在该元素上触发click事件
然后它找到第二个，将它绑定到fancybox并在第二个元素上再次触发click事件
依此类推，直到找到最后一个元素，将其绑定到fancybox并再次触发click事件

由于在最后一个元素上触发了最后一个click（就在它被绑定到fancybox之后），所以最后一个元素是你在fancybox中得到的。

解决方法

要从第一个元素触发您的图库（假设这是您想要的），请使用.eq()方法过滤哪个元素应该触发click事件，例如：

$(".fancybox").fancybox().eq(0).trigger("click");

参见 JSFIDDLE

Answer 2

尝试从您的设置中删除索引：2 ...

Fancybox画廊，从最后一个元素开始

2 个答案: