Question

我有一个带有缩略图助手的fancybox画廊，如下所示：

<a class="fancybox-thumbs" data-fancybox-group="thumb-1" href="img1.jpg">
    <img src="img1.jpg"/>
</a>
<a class="fancybox-thumbs" data-fancybox-group="thumb-1" href="img2.jpg" style="display: none">
    <img src="img2.jpg"/>
</a>
<a class="fancybox-thumbs" data-fancybox-group="thumb-1" href="img3.jpg" style="display: none">
    <img src="img3.jpg"/>
</a>

所以我只保留第一张图像并隐藏另一张图像。单击第一个图像时，它会打开图库，缩略图显示所有三个图像。

我想从图库中删除第一张图片（以及缩略图）。因此，当我点击它时，它会打开图库，但只需使用“img2”和“img3”。

我该怎么做？

Answer 1

首先，如果您要隐藏一些图像，那么他们就不必拥有缩略图。只需将其锚点包装在隐藏的容器中，如

<div style="display:none">
    <a data-fancybox-group="thumb-1" class="fancybox-thumbs" href="img2.jpg"></a>
    <a data-fancybox-group="thumb-1" class="fancybox-thumbs" href="img3.jpg"></a>
</div>

注意我们只是包装图像2和3，因为1将可见。

其次，从图片1和fancybox-thumbs 属性中删除类 data-fancybox-group="thumb-1"，因为此图片不属于画廊但触发器。然后为它设置一个不同的类并保持拇指：

<a class="fancyboxTrigger" href="img1.jpg"><img src="imgThumb1.jpg" alt=""/></a>

将click事件绑定到此图片，该图片将触发fancybox图库，如：

jQuery(document).ready(function ($) {
    $(".fancyboxTrigger").on("click", function (e) {
        e.preventDefault(); // prevents to follow the link of first image
        $(".fancybox-thumbs").fancybox({
            // fancybox API options
        }).eq(0).trigger("click");
    })
}); // ready

注意我们将.fancybox()，.eq()和.trigger()方法绑定并链接到.fancybox-thumbs选择器。

另请注意.eq(0)定位图库的第一个元素（javascript中的索引从0开始）

参见 JSFIDDLE

最后一个注释：如果您希望第一个锚点在没有缩略图的情况下触发图库，只需将<img>标记替换为

等文字即可

<a class="fancyboxTrigger" href="img1.jpg">Open fnacybox gallery</a>

没有第一张图片的Fancybox缩略图

1 个答案: