Question

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 src="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?

Answer 1

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