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

【问题标题】：How to not show the first image when you open the gallery - Fancybox 2打开图库时如何不显示第一张图片 - Fancybox 2
【发布时间】：2013-06-23 23:35:01
【问题描述】：

我使用 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;
}

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

单击打开图库后，我想隐藏第一张图片，以便图库打开第二张图片。我该怎么做？

谢谢。

【问题讨论】：

Skipping the first image 是否意味着画廊应该从第二张图片打开但第一张图片仍然是画廊的一部分？（如果循环浏览画廊的第一张图片会在最后显示）
不，实际上我根本不想显示第一张图片。

标签： jquery fancybox fancybox-2

【解决方案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 事件绑定到它，例如：

$(".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

【讨论】：

谢谢！这正是我想要的。
如果我有超过 1 个画廊？
@John ：您针对该画廊的正确选择器（class）

【解决方案2】：

如果有人正在寻找替代答案，您可以执行以下操作：

<a class="fancybox" rel="group1" href="images/second-image.jpg">
  <img src="images/first-image.jpg" />
</a>
<!-- clicking on the above image will open second-image.jpg in the fancybox,
     though first-image.jpg is shown as the thumbnail. -->
<a class="fancybox" rel="group1" href="images/third-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/fourth-image.jpg"></a>
<a class="fancybox" rel="group1" href="images/and-so-on.jpg"></a>

这样你就不需要编写额外的 CSS（隐藏）或 jquery（触发）

【讨论】：