是否可以对许多图像进行灯箱化，但只显示一张图像来激活它们？

Question

我正在使用 Lightbox 来显示照片。所以如果我有两类照片，“工作”和“假期”，我会这样做......

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[work]">image #3</a>

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>

这会显示 6 张图片，当我单击其中一张时，它会启动 Lightbox。

但是，我希望最初只能显示两张图片（一张用于“工作”，一张用于“假期”），但是当其中一张被点击时，它的行为就像第一个示例一样，例如通过 Lightbox 显示该类别中的所有照片。

这可能吗？如果有，怎么做？

非常感谢任何帮助！ :)

谢谢

Answer 1

如果您只是没有在锚的节点值中放置任何内容，它们就不会显示出来，尽管您可能希望确保这些空锚之间没有任何空格，以防空格出现。

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[work]"></a>
<a href="images/image-3.jpg" rel="lightbox[work]"></a>
<a href="images/image-4.jpg" rel="lightbox[vacation]">image #2</a>
<a href="images/image-5.jpg" rel="lightbox[vacation]"></a>
<a href="images/image-6.jpg" rel="lightbox[vacation]"></a>

Answer 2

为每个类别中的第二个和第三个图像添加一个 css 类以将其隐藏在浏览器中。例如：

<a href="images/image-1.jpg" rel="lightbox[work]">image #1</a>
<a class="hidden" href="images/image-2.jpg" rel="lightbox[work]">image #2</a>
<a class="hidden" href="images/image-3.jpg" rel="lightbox[work]">image #3</a>

<a href="images/image-4.jpg" rel="lightbox[vacation]">image #4</a>
<a class="hidden" href="images/image-5.jpg" rel="lightbox[vacation]">image #5</a>
<a class="hidden" href="images/image-6.jpg" rel="lightbox[vacation]">image #6</a>

然后添加到你的css文件中：

a.hidden{display:none;}

Answer 3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>