Image Gallery with JQuery Lightbox

Question

Hi there,

I've used the JQuery lightbox on a couple of websites, by having a gallery of thumbnails and the thumbnails as links to the bigger photos.

My question is, using lightbox - can I make it so that I have a thumbnail image that when clicked takes you to a folder with a few pictures to cycle through, rather than just linking to one photo like below?

<a href="Images/Gallery/Box1.jpg" class="lightbox">
            <asp:Image runat="server" ImageUrl="~/Images/Box1.jpg" Width="120" Height="88"/>
</a>

In the gallery folder there are two images - Box1.jpg and Box2.jpg, but I only want a link to Box1.jpg on the page and still be able to flick through box images using lightbox.

I am using this lightbox: http://leandrovieira.com/projects/jquery/lightbox/

Is this possible?

Answer 1

For a gallery, you need to give all links the same "rel" attribute, eg:

<a href="Images/Gallery/1.jpg" class="lightbox" rel="gallery">
            <img src="Images/Gallery/Thumbnails/1T.jpg" width="136" height="97" />
</a>
<a href="Images/Gallery/2.jpg" class="lightbox" rel="gallery">
            <img src="Images/Gallery/Thumbnails/2T.jpg" width="136" height="97" />
</a>

This is for Fancybox anyway, I'm sure most other plugins work the same.

Answer 2

The easiest way to show only one link that opens the lightbox and have the lightbox show multiple images would be to include links for all images in the page and use CSS to hide the unwanted links.

Something like this:

HTML:

<ul id="gallery">
    <li class="show"><a href="Box1.jpg"><img src="Box1thumb.jpg" alt="" /></a></li>
    <li><a href="Box2.jpg"><img src="Box2thumb.jpg" alt="" /></a></li>
    <li><a href="Box3.jpg"><img src="Box3thumb.jpg" alt="" /></a></li>
</ul>

CSS:

#gallery li {
    display: none;
}
#gallery li.show {
    display: block;
}

JavaScript:

$('#gallery a').lightBox();