jquery - 如何在打开图库时不显示第一张图片 - Fancybox 2

Question

我使用 Fancybox 2 创建一个图像库，其中包含其网站上的示例:http://fancyapps.com/fancybox 。

我使用“display: none;”隐藏了除第一个图像之外的所有图像

HTML

<a class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/></a>
<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt=""/></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt=""/></a>
</div>

CSS

.hidden {
    display: none;
}

JS

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        padding : 0
    });

单击打开图库后，我想隐藏第一张图像，以便图库打开第二张图像。我怎样才能做到这一点？

谢谢。

Answer 1

如果第一个图像不会包含在 fancybox 库中，则不需要具有 fancybox 类，因为它将仅用于触发 fancybox 库。

您可以使用不同的类(例如fancyboxLauncher)

<a class="fancyboxLauncher" href="http://fancyapps.com/fancybox/demo/1_b.jpg" title="one"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>

...并将 click 事件绑定(bind)到它，例如:

$(".fancyboxLauncher").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});

... 注意，我们使用方法 .eq(0) 从第一项开始触发图库，否则将从最后一项开始。另请注意 .on() 需要 jQuery v1.7+

您仍然需要此代码来访问 fancybox 画廊

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
    padding: 0
});

此外，如果 fancybox 画廊的图像将隐藏，它们实际上不需要缩略图(img 标签)，否则您只需添加页面加载不必要的开销，因此您可以这样做

<div class="hidden">
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
   <a class="fancybox" href="http://fancyapps.com/fancybox/demo/3_b.jpg"></a>
</div>

检查JSFIDDLE