DesignFission

The update to my previous method to “Opening a Thickbox in iFrame” is finally here.

As you all know, ThickBox is no longer under development since 2007, the next popular alternative to take over the reigns of ThickBox seems to be ColorBox, and so I’ve done a new tutorial to do the same thing with ColorBox.

There are a few things that remain the same from the other example.

Step 1: Prepare your HTML.

Include the source files to ColorBox’s CSS, and Javascript files, as well as the original jQuery JS files.

Insert in the tags of your HTML:

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

Step 2: Insert the Flash

Using SWFObject, insert Flash in your HTML and remember to set the following 2 parameters: “allowScriptAccess” to “always” and “wmode” to “transparent“.

Insert in the tags of your HTML:

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

Insert in the tags of your HTML:

<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="550" height="200">
  <param name="movie" value="colorbox.swf">
  <param name="quality" value="high">
  <param name="wmode" value="transparent">
  <param name="swfversion" value="6.0.65.0">
  <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
  <param name="expressinstall" value="Scripts/expressInstall.swf">
  <param name="allowscriptaccess" value="always">
  <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
  <!--[if !IE]>-->
  <object type="application/x-shockwave-flash" data="colorbox.swf" width="550" height="200">
    <!--<![endif]-->
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="swfversion" value="6.0.65.0">
    <param name="expressinstall" value="Scripts/expressInstall.swf">
    <param name="allowscriptaccess" value="always">
    <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
    <div>
      <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
    </div>
    <!--[if !IE]>-->
  </object>
  <!--<![endif]-->
</object>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>

Step 3: Prepare the Javascript Function

Because ColorBox does some parsing of the Javascript functions and ExternalInterface doesn’t seem to be able to call functions with the dollar sign in them. What I’ve done here is to create a simple javascript function and use Flash to call this very function.

Insert in the tags of your HTML:

<script>

	function launchColorBox(url){
		$.colorbox({href:url,width:"80%", height:"80%",iframe:true});
	}

</script>

Step 4: The Flash Code!

The final step is to actually reuse the Flash Code in my previous version, making only slight changes. Create a button with the instance name “btn1″ and put the code in the first frame of your Flash file.

stop()
//Imports the ExternalInterface Class
import flash.external.ExternalInterface;

//Adds the CLICK eventlistener to the button btn1
btn1.addEventListener(MouseEvent.CLICK,openColorBox)

//Launches the JS function that we created earlier.
function openColorBox(e:MouseEvent){
	ExternalInterface.call("launchColorBox","http://www.google.com");
}

You can view the demo here and download the source files here.