ColorBox Grouping Photos

Im using color box, i have it working fine, except i don't understand how to add multiple images to开发者_高级运维 the gallery when it is clicked.

But i need 2 images to appear for each flower.

Thanks for your help!

There's a lot to explain here because you are using the example code, you need to add rel="Example1" attribute to your image tags. Each group of images must have a unique rel attribute value and a corresponding jQuery hook:

Your jQuery code:

$("a[rel='example1']").colorbox(); // Choose the type of colorbox instance you like and replicate it
$("a[rel='example2']").colorbox();

If all your images on the page have the same rel attribute value the colorbox instance will group all the images on your page into a slideshow.

<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 1">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 2">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example1" title="Flower 3">

<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 1">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 2">
<a href="images/floral/full-size/vegas-weddings-floral-1.jpg" rel="example2" title="Flower 3">

Even better: automatic grouping of images by a rel or data-rel attribute.

<a href=".." class="colorbox" data-rel="group1"><..></a> 
<a href=".." class="colorbox" data-rel="group1"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 
<a href=".." class="colorbox" data-rel="group2"><..></a> 

Configuration of colorbox - use a callback for rel property

$('.colorbox').colorbox({
    rel:function() {        
        return $(this).data('rel');
    }
});

(fixed a typo on jquery class selector)