2

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

我隐藏了所有图像，除了第一个使用“显示：无；”

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
    });

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

谢谢。

4

2 回答 2

6

如果第一个图像不包含在 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

于 2013-06-24T18:05:15.337 回答
1

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

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

于 2015-05-26T06:34:45.743 回答