title: Applying Shadowbox.js on dynamically generated content
body: <p>I m using shadowbox.js for image gallery display.</p>
  
  <p>for this we have to generate html like this</p>
  
  <pre><code>&lt;a href="images/Ganesha3602.jpg" rel="shadowbox[my]"&gt;&lt;img src="images/thumb.jpg"   alt="First" title="First image" /&gt;&lt;/a&gt;
  &lt;a href="images/original.jpg" rel="shadow[my]"&gt;&lt;img src="images/thumb.jpg" alt="Second" title="Second image" /&gt;&lt;/a&gt;
  &lt;a href="images/original.jpg" rel="shadowbox[my]"&gt;&lt;img src="images/thumb.jpg" alt="First" title="First image" /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>and then apply <code>Shadowbox.init()</code> on body load. Its working like a charm when the above html is static. But when i generate it dynamically using <code>$.ajax</code> and call <code>Shadowbox.init()</code> on success; shadowbox does not work. I also tried calling  <code>Shadowbox.init()</code> on complete.</p>
  
  <p>My code is something like this:</p>
  
  <pre><code>$(document).on('click','#load_posts_comments',function(){
  
      $.ajax({
          url:"post_comment_json.php",
          type: "POST",
          dataType: "json",
          data:{user_id:"123"},
          success: function(data){
              load_posts_comments(data);
          },
          complete: function(){
              Shadowbox.init();
          }
      });
  });
  </code></pre>
  
  <p>Where am I going wrong? I looked the shadowbox website but there was no documentation regarding dynamically loaded content. Help would be appreciated.</p>