lightbox doesn't load Facebook plugin after close

i have this script:

<a id="editprofile" href="#edit_profile">123</a>
<div style="display: none;">
<div id="edit_profile" style="width:640px;height:auto;overflow:auto;">
<div id="fb-root"></div><script s开发者_如何学编程rc="http://connect.facebook.net/en_US/all.js#xfbml=1"> </script><fb:comments href="apps.facebook.com/conteststwenty/" num_posts="2" width="620"></fb:comments>
</div>
</div>

and js:

$("#editprofile").fancybox({
      'titlePosition'        : 'inside',
     'transitionIn'        : 'none',
     'transitionOut'        : 'none'
 });

or see jsfiddle.

what happens is that i have a simple Facebookplugin loading inside (could be any FB plugin)

and after I close the lightbox the second time I open it the plugin doesn't appear. Any ideas how to make it work, or maybe suggest another lightbox that will go the trick?

While @WTK is right about the src attribute and Fancybox behavior. Altering the library source is a BAD practice and the last thing you may do. A better approach could be using the onStart event:

$("#editprofile").fancybox({
    'titlePosition': 'inside',
    'transitionIn': 'none',
    'transitionOut': 'none',
    'onStart': saveSrc,
});
var src = '';
var $commentsContainer = $("#edit_profile");
function saveSrc() {
    if(!src) {
        // First time here, we still have the src attribute so 
        // grab it and save it for later!
        src = $commentsContainer.find('iframe').attr('src');
    } else {
        $commentsContainer.find('iframe').attr('src', src)
    }
}

Also you shouldn't be adding the fb-root and the Facebook JS library to the lightbox.
Demo: link

It's not showing the second time, because fancybox onclose handler resets the src attribute of any iframe it finds in its content. So next time you open the fancybox the iframe which suppose to have FB content has src

To overcome this, you can comment out following line in fancybox js src:

content.find('iframe').attr('src', isIE6 && /^https/i.test(window.location.href || '') ? 'javascript:void(false)' : 'about:blank');

Check updated example here: http://jsfiddle.net/muHXe/4/

I agree with both the solutions given.. you can try this too

$(document).ready(function() {
var mySRC = "";
$("#editprofile").fancybox({
    'titlePosition': 'inside',
    'transitionIn': 'none',
    'transitionOut': 'none',
    'onComplete': function() {
        mySRC = $('#edit_profile iframe').attr('src');
    },
    'onClosed': function() {
        $('#edit_profile iframe').attr('src', mySRC);

    }
});
});

here is a fiddle for ur prob http://jsfiddle.net/muHXe/7/