javascript - Is it possible to lightbox many images but only show one image to activate them? - Stack Overflow

admin管理员组

文章数量:1201789

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

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

• javascript
• jquery
• ajax
• lightbox

Share Improve this question Follow asked May 3, 2010 at 0:42 ObayObay 3,2051616 gold badges5757 silver badges8080 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: 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>

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

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

本文标签： javascriptIs it possible to lightbox many images but only show one image to activate themStack Overflow