While working on a recent project we were faced with the issue of having to invoke a PHP event calendar in a completely Flash base site. Popping up a window was not an option because of the pop-up blocker issue. Many of the lightbox scripts out there have a difficult time showing active content like PHP, SWF, video, etc. Additionally, many of them do not expose a function that allows you to open the light box without responding to an object event. After doing a little research we cam across a jQuery plug-in called ColorBox. ColorBox can open any content using an iFrame. It can also open Flash and PHP content in a window without having to use an iFrame. Another great advantage of the ColorBox interface is that it implement call-back events so you can create complex exentions to the standard LightBox functionality. Let’s tak a look at how we used the ColorBox script to solve our Flash call problem.
First we installed the ColorBox and supporting JavaScript libraries on the server.
Then we created include links in the html/php page containing the Flash interface, for the ColorBox and jQuery files. Note that the jQuery links to the most current file on the jQuery site. them in the html page containing the Flash interface.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Customer Site</title>
<script type="text/javascript" src="includes/swfobject.js"></script>
<link type="text/css" media="screen" rel="stylesheet" href="/css/colorbox.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function SWFDelegate(url,iwidth,iheight,caption) {
$.fn.colorbox({iframe:true, href:url, width:900, height:825, close:'Close'});
}
//-->
</script>
We also created a delegate function (SWFDelegate()) in the html file that enabled us to use the colorbox call for other purposes. This is where the “stand alone” call for colorbox is used. ($.fn.colorbox({[parameters]};)
Finally we added the following call to the Flash menu interface. Since this was for a site using AS2.0 we used the folling format.
on (release)
{
getURL("javascript:SWFDelegate('/calendar/calendar.php', '800', '750', 'Customer Event Calendar');");
}
Use this style if you are implementing this in an AS3.0 project:
mybutton.addEventListener(MouseEvent.CLICK, mouseClick);
function mouseClick(e:MouseEvent):void
{
navigateToURL(new URLRequest("javascript:SWFDelegate('/calendar/calendar.php', '800', '750', 'Customer Event Calendar');");
}
Now when you click the button or interactive component in your Flash movie it will call the delegate function and open a nice modal lightbox with your active content. With ColorBox that content can be another Flash movie, a Video Clip, a PHP or ASPX application, etc. Your imagination is the only limiting factor.
Resources:
ColorBox Script
ColorBox – Documentation
ColorBox – Examples
jQuery ScriptKudos to Jack Moore for developing and sharing this script in the Open Source Commons.
Tags: Adobe Flash, AS2, AS3, ColorBox, HTML, JavaScript, LightBox
