打开图库时如何不显示第一张图像-Fancybox 2 [英] How to not show the first image when you open the gallery - Fancybox 2

问题描述

我使用Fancybox 2通过其网站上的示例创建图片库: http://fancyapps.com/fancybox .

I using Fancybox 2 to create a image gallery with the examples from their website: http://fancyapps.com/fancybox.

除第一个图像外，我使用"display:none;"来隐藏所有图像.

I'm hiding all of the images except the first using using "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
    });

单击打开画廊后，我想隐藏第一个图像，以便画廊打开到第二个图像.我该怎么办?

Once you click to open the gallery I want to hide the first image so that the gallery opens up to the second image. How can i do that?

谢谢.

推荐答案

如果第一张图像不包含在fancybox画廊中，则不需要使用fancybox类，因为它将被使用只能触发fancybox画廊.

If the first image is not going to be included in the fancybox gallery, then it doesn't need to have the fancybox class since it will be used to fire the fancybox gallery only.

您可以使用其他类(例如fancyboxLauncher)

You could use a different class (e.g. 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事件绑定到它:

... and bind a click event to it like :

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

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

... notice that we used the method .eq(0) to fire the gallery from the first item, otherwise it will start from the last. Also notice that .on() requires jQuery v1.7+

fancybox画廊仍然需要此代码

You still need this code for the fancybox gallery

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

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

Additionally, if the images for the fancybox gallery will be hidden, they actually don't need to have a thumbnail (img tag) otherwise you will be just adding an unnecessary overhead to your page load so you could do

<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

Check JSFIDDLE

这篇关于打开图库时如何不显示第一张图像-Fancybox 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！