Using Shadowbox.js for dynamically generated content

I am using shadowbox.js to display a gallery of images.

for this we need to generate html like this

<a href="images/Ganesha3602.jpg" rel="shadowbox[my]"><img src="images/thumb.jpg"   alt="First" title="First image" /></a>
<a href="images/original.jpg" rel="shadow[my]"><img src="images/thumb.jpg" alt="Second" title="Second image" /></a>
<a href="images/original.jpg" rel="shadowbox[my]"><img src="images/thumb.jpg" alt="First" title="First image" /></a>

and then apply Shadowbox.init()to the load on the body. Its work is like a charm when the above html is static. But when I generate it dynamically with help $.ajaxand call Shadowbox.init()on success; shadowbox does not work. I also tried calling Shadowbox.init()upon completion.

My code looks something like this:

$(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();
        }
    });
});

Where am I mistaken? I looked at the shadowbox website, but there was no documentation regarding dynamically loading content. Help will be appreciated.