Javascript 是否可以对多个图像设置灯箱，但仅显示一个图像以激活它们？

我正在使用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显示该类别中的所有照片

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

非常感谢您的帮助！：）

---

谢谢

在每个类别的第二个和第三个图像中添加一个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；}

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

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

---

这是最简单、最干净的方法。我建议您在正确显示代码之前加上四个空格。

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