CODEWITHSUNDEEP
javascriptjquerylightbox
Mike
Mike

Reputation: 6239

Image Gallery with JQuery Lightbox

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?

Upvotes: 3

Views: 2526

Answers (2)

Jeffery To
Jeffery To

Reputation: 11936

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

Upvotes: 1

Aaron McAdam
Aaron McAdam

Reputation: 706

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.

Upvotes: 0

Related Questions