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

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.

但是,我希望最初只显示两个图像(一个用于'工作',一个用于'度假'),但是当其中一个被点击时,它的行为就像第一个例子,例如显示所有照片通过灯箱分类.

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

很感谢任何形式的帮助!:)

谢谢

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