Is it possible to lightbox many images but only show one image to activate them?

Question

I'm using Lightbox to display photos. So If I have two categories of photos, "work" and "vacation", I would do...

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

This displays 6 images, and when I click one of them, it starts the Lightbox.

However, I'd like to be able to display only two images initially (one for 'work', one for 'vacation'), but when one of them is clicked, it behaves like the first example, e.g. display all photos in that category through Lightbox.

Is this possible? If so, how?

Any help is very much appreciated! :)

Thanks

Solution 1

If you simply don't put anything in the node value of the anchor they don't show up, though you may wish to make sure there isn't any whitespace between these empty anchors in-case the whitespace shows up.

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

Solution 2

Add a css class to the second and third image in each category to hide it from the browser. For example:

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

Then add to your css file:

a.hidden{display:none;}

Comments

[dclowd9901]

This is the easiest and cleanest method.

[Bo Persson]

I you put four spaces before the code it displays correctly.