javascript - Applying Shadowbox.js on dynamically generated content - Stack Overflow

admin管理员组

文章数量:1414604

I m using shadowbox.js for image gallery display.

for this we have 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() on body load. Its working like a charm when the above html is static. But when i generate it dynamically using $.ajax and call Shadowbox.init() on success; shadowbox does not work. I also tried calling Shadowbox.init() on plete.

My code is something like this:

$(document).on('click','#load_posts_ments',function(){

    $.ajax({
        url:"post_ment_json.php",
        type: "POST",
        dataType: "json",
        data:{user_id:"123"},
        success: function(data){
            load_posts_ments(data);
        },
        plete: function(){
            Shadowbox.init();
        }
    });
});

Where am I going wrong? I looked the shadowbox website but there was no documentation regarding dynamically loaded content. Help would be appreciated.

I m using shadowbox.js for image gallery display.

for this we have 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() on body load. Its working like a charm when the above html is static. But when i generate it dynamically using $.ajax and call Shadowbox.init() on success; shadowbox does not work. I also tried calling Shadowbox.init() on plete.

My code is something like this:

$(document).on('click','#load_posts_ments',function(){

    $.ajax({
        url:"post_ment_json.php",
        type: "POST",
        dataType: "json",
        data:{user_id:"123"},
        success: function(data){
            load_posts_ments(data);
        },
        plete: function(){
            Shadowbox.init();
        }
    });
});

Where am I going wrong? I looked the shadowbox website but there was no documentation regarding dynamically loaded content. Help would be appreciated.

• javascript
• jquery

Share Improve this question Follow edited Jul 10, 2012 at 9:16 Daedalus 7,72255 gold badges3838 silver badges6363 bronze badges asked Jul 10, 2012 at 8:01 BhoopeshBhoopesh 40011 gold badge33 silver badges1313 bronze badges 4

• yeah I had tried that too but it did not work – Bhoopesh Commented Jul 10, 2012 at 8:06
• 1 Could this answer help you? stackoverflow./questions/9144577/… – Niklas Commented Jul 10, 2012 at 8:20
• @Niklas thanks man .. You saved my day. :) using this code worked Shadowbox.clearCache(); Shadowbox.setup(); – Bhoopesh Commented Jul 10, 2012 at 8:30
• I've posted an answer in case they don't close this as a duplicate =) – Niklas Commented Jul 10, 2012 at 8:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You need to reinitialize it by using Shadowbox.clearCache(); and Shadowbox.setup();.
It's been explained much better here: shadowbox stops working after jquery function call

本文标签： javascriptApplying Shadowboxjs on dynamically generated contentStack Overflow