CLOCKWORKBIRD: design, animation, illustration » javascript http://www.clockworkbird.com/site Clockworkbird (aka Heather Smith) : Chicago based web designer, developer, animator, illustrator, artist and musician. Sat, 21 Jan 2012 23:17:41 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Shadowbox.js: Flash and Javascript doing a jig http://www.clockworkbird.com/site/2009/05/29/shadowboxjs-flash-and-javascript-doing-a-jig/ http://www.clockworkbird.com/site/2009/05/29/shadowboxjs-flash-and-javascript-doing-a-jig/#comments Fri, 29 May 2009 20:17:14 +0000 hey hey http://www.clockworkbird.com/blog/?p=261 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!

Step 1:
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:

<link rel=”stylesheet” type=”text/css” href=”scripts/shadowbox/shadowbox.css”>
<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. :

<script type=”text/javascript”>
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:

button_btn.onRelease = function ()
{
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.

DOWNLOAD A COMPLETE TUTORIAL

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.

]]> http://www.clockworkbird.com/site/2009/05/29/shadowboxjs-flash-and-javascript-doing-a-jig/feed/ 0