I recently had some issues trying to load a swf via swfobject into a facebox. Swfobject 2.2 gives me some additional functionality including the ability to remove the swf completely when my facebox is closed. This was a problem for me in IE because audio from my swf continued to play after closing the facebox. The main problem is that facebox makes a duplicate of the content loaded on the page and places it inside its modal. At this point we have two IDs of the same name and can no longer control an element or object by ID. So I decided to add the new div with the initial facebox call and then use this new div for the swfobject. Here’s a quick example of code (sorry it’s so narrow and difficult to read):
Make sure you are loading jQuery, facebox and swobject 2.2
$(document).bind('reveal.facebox', function() {
swfobject.embedSWF("yourfilename.swf", "yourDiv", "400", "300", "8","expressInstall.swf");
});
$(document).bind("close.facebox", function(){
// Otherwise audio keeps playing in IE
swfobject.removeSWF("yourDiv");
}) ;
jQuery.facebox('
');
In addition, if you want to keep the facebox centered when the browser is resized, try this!
$(window).resize(function(){
var pWidth = $(document).width();
$("#facebox").css("left",pWidth / 2 - ($("#facebox table").width() / 2));
});
References:
http://jquery.com/
http://defunkt.github.com/facebox/
http://github.com/defunkt/facebox/blob/master/facebox.js
http://code.google.com/p/swfobject/wiki/api
http://code.google.com/p/swfobject/wiki/documentation
The duplication of IDs in Facebox is a serious issue with more than just this swfobject bug. It caused me the same type of trouble when trying to manipulate a form on the page that was in the modal window.
HUGE oversight from the authors of facebox.js, IMO. I strongly suggest looking at alternatives.
Thanks for the comment Evan. I had problems with forms as well and had a few workarounds. I don’t know if this is necessarily an oversight for the facebox guys. It’s a pretty simple and slick modal plugin that probably didn’t have any intentions of running js.
Perhaps jQuery UI’s modal has a better implementation:
http://jqueryui.com/