打开图库时如何不显示第一张图片 - 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事件绑定到它,如:

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