Question

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

我使用＆＃34; display：none;＆＃34;

隐藏除第一张以外的所有图片

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事件绑定到它，如：

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

Answer 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（触发）

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

2 个答案: