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

I might be misunderstanding, but I'm getting the impression you want to do more than the "grouped photo" style gallery that ColorBox offers. I'm not quite sure on the next/previous functionality you're describing, but my thought would be to write this functionality without ColorBox initially.

Add your viewing gallery to a normal div within the page. When you've setup the gallery and its behavior to your liking, you can call ColorBox inline on your div(showing your newly created control within the popup).

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)

Answer 3

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'

Answer 4

sounds like you might want to use a different plugin. PrettyPhoto is great for galleries.

Answer 5

Thanks, Jakobud ! It is exactly what I needed. It works great !

Just one point to add : don't forget to add the gallery name after your picture href, othewise, it doesn't work.

Catherine

Answer 6

Hi Cath.. how exactly do you add the gallery name after the picture href.. I'm trying to achieve the same effect for my blog... thanks! :)