开发者

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

开发者 https://www.devze.com 2022-12-28 17:41 出处:网络
I\'m using Lightbox to display photos. So If I have two categories of photos, \"work\" and \"vacation\", I would do...

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.开发者_StackOverflow display all photos in that category through Lightbox.

Is this possible? If so, how?

Any help is very much appreciated! :)

Thanks


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

精彩评论

暂无评论...
验证码 换一张
取 消