Archive for May 29th, 2009
Shadowbox.js: Flash and Javascript doing a jig
Friday, May 29th, 2009
Websites these days are simply layers of technologies stacked on top of one another. Every member of the digital sandwich doing what they do best. HTML structuring, CSS styling, Flash flashing, etc, etc…
Sometimes they all play well together and sometimes it’s an alley way knife fight.
I recently completed a project that involved creating little flash widgets that would call a pop up using some sort of js lightbox library. Turns out this is not as simple as I thought it would be. After auditioning 10 (that’s right 10) lightboxes I finally emerged with a winner: Shadowbox.
The issue:
Most lightboxes use the rel attribute to call the popup function. As far as I can tell, there is no way to insert a rel attribute inside of a getURL() in Actionscript. To be honest, i had lots of other issues with the lightboxes I tried: browser capability, conflict with other js libraries I was using (jquery), inconsistent behavior, inability to load html pages (vs just images), etc.. etc..
The solution:
Shadowbox allows you to set up a custom function for opening an instance of the popup. You simply feed that function name, proceeded by javascript: into the getURL() and voila!
Download Shadowbox and buy a license! if you intend to use it for commercial purposes. Come on, y’all. It’s 20 bucks. Let’s support our awesome open source developers.
Step 2:
Embed the scripts properly in your header:
<script type=”text/javascript” src=”scripts/shadowbox/shadowbox.js”></script>
Step 3:
Initialize Shadowbox (with the required players – read more here) and then create a custom function in javascript in your html document. :
Shadowbox.init({
players: ["html","iframe"]
});
function abrirSB(url)
{
Shadowbox.open({player: “iframe”, content: url, height: 570 , width: 850});
};
</script>
Step 4:
Create a flash piece with a getURL function applied to a button.
Step 5:
Feed the properly formatted URL with the custom function name into the getURL:
{
getURL(“javascript:popUpFunction( ‘hello_world.html’);”)
}
Step 6:
Embed your flash object. I generally use SWFObject.
Step 7:
Jump up and down and do a little dance when it works.
I’ve even created a working sample for you, just to make it that much easier.
FYI: If you run it locally, Flash will try to verify that you have security clearance for that file. It’s not an error. It’s a security measure.
Tags: custom function, flash, getURL, javascript, lightbox, shadowbox, tutorial
Posted in flash, javascript | No Comments »
