colorbox bind on live with elements' grouping won't work

Question

I'm using the well known and good jQuery Colorbox for a gallery. Part of images are being added to the page with ajax. I am trying to have colorbox bind to all new and existing images on page and also group all of them together. Right now, I succeed to achieve only one of the two. With this code, all images are well grouped together to one colorbox gallery, but after adding more images to the page (via ajax), colorbox is not being binded to them at all:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

With this code, images are binded to colorbox after adding more images to page, but the rel grouping is not working (even not to the set of images that were first loaded to the page):

$('a.exhibition').live('click', function() {
    $.fn.colorbox({
        inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true,      
        rel:"hpexhibition"
    });
    return false;
});

I also tried this code, but it is the same - images are well binded to colorbox, but as single images, not as a (rel) gallery:

$("ul#home-exhibition").on("click", "a[rel='hpexhibition']", function (event) {
    event.preventDefault();
        $.colorbox({
            inline:true,
        href:$(this).attr('href'),
        opacity:0.5, 
        overlayClose:true, 
        rel:"hpexhibition"                
         });
});

My html markup for the images gallery is this:

<ul id="home-exhibition">       
    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="3" href="#artitem-cb-details-3">
            <img src="path/to/image53.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-3" class="artitem-cb">
            //Some data of image 3 here...
          </div>    
        </div>
    </li>

    <li class="item">
        <a class="exhibition" rel="hpexhibition" ref="4" href="#artitem-cb-details-4">
            <img src="path/to/image4.jpg" alt="" />
        </a>
        <div style="display:none;">
           <div id="artitem-cb-details-4" class="artitem-cb">
            //Some data of image 4 here...
          </div>    
        </div>
    </li>

    <li> ..... </li>
    <li> ..... </li>
    <li> ..... </li>
</ul>

Is there a way to combine theses two, so that colorbox will work for all images on page - also those that added via ajax - and also will group all of them together? I coulnd't make this work. I believe there should be a way for this to work.

Answer 1

The approach that would probably work would require you to reinitialize your colorbox after new elements are loaded.

In other words you would have to do:

$('a.exhibition').colorbox({
    inline:true,
    href:$(this).attr('href'),
    opacity:0.5, 
    overlayClose:true, 
    rel:"hpexhibition"
});

after ajax call is complete.

Looking at the code of colorbox I don't see other simple ways to handle your case.

Answer 2

Put this instead of $('.colorbox').colorbox();

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});