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