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

Question

Hi,

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

Answer 1

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

Answer 2

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>

Answer 3

hi EAMann... which part of the css file should I add it to? Copy paste the entire a.hidden{display:none;}?