Jquery 如何在打开多媒体资料时不显示第一张图像-Fancybox 2

我使用Fancybox 2创建了一个图像库，其中包含来自其网站的示例：

我使用“display:none

HTML

JS

一旦你点击打开画廊，我想隐藏第一张图片，这样画廊就可以打开第二张图片。我该怎么做

---

谢谢。

如果第一张图像不包含在fancybox gallery中，那么它不需要使用

fancybox

类，因为它将仅用于启动fancybox gallery

您可以使用不同的类（例如，

fancyboxLauncher

）

注意我们使用方法

.eq（0）

从第一项启动库，否则它将从最后一项启动。还要注意，

.on（）

需要jqueryv1.7+

fancybox库仍然需要此代码

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

此外，如果fancybox gallery的图像将被隐藏，它们实际上不需要有缩略图（

img

tag），否则您只会给页面加载增加不必要的开销，这样您就可以这样做了

<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>

---

选中

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

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

跳过第一个图像是否意味着应该从第二个图像打开库，但第一个图像仍然是库的一部分？（如果在画廊中循环，最后会显示第一张图片）不，实际上我根本不想看到第一张图片。谢谢！这正是我想要的。如果我有超过1个画廊呢？@John:你的目标是该画廊中合适的选择器（类）

<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>

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

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

<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>

<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>