Image Gallery Using JQuery

Question

I used the jQuery lightbox on several websites, having a gallery of thumbnails and thumbnails as links to large photos.

My question is using lightboxes. Can I make it so that I have a thumbnail that, when clicked, takes you to a folder with several pictures to go around in a circle, and not just snap to a single photo, as shown below?

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

There are two images in the gallery folder - Box1.jpg and Box2.jpg, but I only want a link to Box1.jpg on the page and still be able to view the images using the lightbox.

I use this lightbox: http://leandrovieira.com/projects/jquery/lightbox/

Is it possible?

Answer 1

The easiest way to show only one link that opens a lightbox, and enable lightbox on multiple images, will include links for all images on the page and use CSS to hide unwanted links.

Something like that:

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();

Answer 2

For the gallery you need to specify all the links to the same rel attribute, for example:

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