How to make a jquery lightbox open multiple images from one link?

Question

Using a lightbox like ColorBox or jQuery Lightbox Plugin how can i make a single link which opens a gallery / array of images?

For example i have 1 thumbnail and when a user clicks it i want it to open multiple pictures in the lightbox so the user can click next or previous to view all the pictures within that gallery.

My thinking was that i just do it as normal 1 link to 1 picture then use jquery to hide all but the first link. There must be a better way?

Thanks.

Answer 1

Here is the proper (and more efficient) solution:

HTML:

<div id='gallery'>
    <a href="images/big-image1.jpg">
        <img src="images/thumbnail-image1.jpg"/>
    </a>
    <a href="images/big-image2.jpg" ></a>
    <a href="images/big-image3.jpg" ></a>
    <a href="images/big-image4.jpg" ></a>
</div>

jQuery/JS:

$(document).ready(function() {
    $('#gallery a').lightBox();
});

Note: As you can see, simply list the anchor links to the other images you want to be apart of the gallery. No need to add images to the markup and then hide them with JS. The only image you will see in the markup example above is images/thumbnail-image1.jpg Lightbox will automatically hide the rest of them and then show each one at the appropriate time.

Answer 2

Using jQuery Lightbox Plugin, the example code says to do the following:

$(document).ready(function() {
    $('#gallery a').lightBox({fixedNavigation:true});
    $('#gallery a:gt(0)').hide();
});

That makes all the links open a lightbox and it should have the Next/Back links to browse through the gallery. Is that what you're looking for?

(The example is available here: http://leandrovieira.com/projects/jquery/lightbox/#example)