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

Answer 1

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

Answer 2

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 3

<a href="../gallery/renos/logo.jpg" rel="lightbox[renovation]"></a>

So:

rel="lightbox[renovation]"

Answer 4

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 5

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.