title: $.Colorbox: how to bind rel-group on click dynamically
body: <p>I need to bind group to <code>&lt;a&gt;</code> wherever I want (onOpen callback). (It's working fine when I pre-defined rel-group class to tag <code>&lt;a&gt;</code> in #sub.)
  Here is my  code</p>
  
  <pre><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...");
  }
     });
  });
  </code></pre>
  
  <p>Here is my HTML that I have  in #sub and I want to include it in my existing group in #main.</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;a id="zoom-btn" class="lightbox-group"
          href="data:image/jpeg;base64,iVB0w0..."&gt;Zoom&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div id="sub"&gt;
      &lt;a href="#" class="box small"&gt;
         &lt;img src="data:image/jpeg;base64,USZ8s..."&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please give me some advice I'm stuck here for 18 hours now  :'(
  Thank you in advance
  - fellows</p>