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张图片，当我点击其中一张图片时，它会启动灯箱。

但是，我希望最初只能显示两张图片（一张用于'工作'，一张用于'度假'），但是当点击其中一张时，它的行为与第一个例子相同，例如通过灯箱显示该类别中的所有照片。

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

非常感谢任何帮助！：）

由于

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>

是否可以灯箱许多图像，但只显示一个图像来激活它们？

3 个答案: