10

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

Improve this question

3 Answers 3

Reset to default
11

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>
Improve this answer
1
  • This is the easiest and cleanest method.
    – dclowd9901
    Commented May 3, 2010 at 0:56
6

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

Improve this answer
0 
<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>
Improve this answer
1
  • 1
    I you put four spaces before the code it displays correctly.
    – Bo Persson
    Commented Jul 31, 2011 at 14:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.