$.Colorbox: how to bind rel-group on click dynamically

Question

I need to bind group to <a> wherever I want (onOpen callback). (It's working fine when I pre-defined rel-group class to tag <a> in #sub.) Here is my code

$(document).ready(function () {
   $(".lightbox-group").colorbox({
   rel: 'lightbox-group',
   photo: true,
   onClosed: function () {
       $(".box.small").each(function () {
           $(this).attr("href","#");
           $(this).removeClass("lightbox-group").removeClass("cboxElement");
       });
   },
   onOpen: function() {
       $("a.box.small").addClass("lightbox-group").addClass("cboxElement");
       $("a.box.small").attr("href", "data:image/jpeg;base64,UHdAF...");
}
   });
});

Here is my HTML that I have in #sub and I want to include it in my existing group in #main.

<div id="main">
    <a id="zoom-btn" class="lightbox-group"
        href="data:image/jpeg;base64,iVB0w0...">Zoom</a>
</div>

<div id="sub">
    <a href="#" class="box small">
       <img src="data:image/jpeg;base64,USZ8s...">
    </a>
</div>

Please give me some advice I'm stuck here for 18 hours now :'( Thank you in advance - fellows

Answer 1

I found what I missed.

I've to bind cboxElement before calling colorbox (It can't be done in onOpen).

Answer 2

 onOpen: function (
   $("a.box.small").addClass("lightbox-group").addClass("cboxElement");
   $("a.box.small").attr("href", "data:image/jpeg;base64,UHdAF...");
}

Optimized

 onOpen: function (){
   $("a.box.small").addClass("lightbox-group").addClass("cboxElement");
   $("a.box.small").attr("href", "data:image/jpeg;base64,UHdAF...");
}