Shadowbox/Thickbox in flash! (working!)

**wootwoot** · 07-30-2008, 02:56 AM

If you ever wondered how to implement a shadowbox or thickbox in flash then look no further!

Here are two examples
I did the shadowbox and someone else did the thickbox

sorry i forgot source - if it is yours please let me know and I will acknowledge

From my experience on using both of them, i found that a shadowbox is a much better option.

Shadowbox uses javascript to hide the swf object when shadowbox is open - can display flash movies in shadowbox itself.

Thickbox relies on wmode = 'transparent' to show the thickbox on top of the flash - very crude solution which slows down you flash heavily and doesnt work in all browsers.

**wootwoot** · 07-30-2008, 06:22 AM

shadowbox --> http://mjijackson.com/shadowbox/
thickbox --> http://jquery.com/demo/thickbox/

**worked** · 08-10-2008, 07:22 PM

My hat is off to you. However, this is written and compiled in as2. Since you posted this in the as3 forum I rewrote it in as3 (its working, to your credit of course). Oh and I love that keysClose option, so slick. In fact, I'm going to continue playing with the flash/shadowbox, if I find things of interest, I'll post here.

AS3:

Code:

button_mc.addEventListener(MouseEvent.MOUSE_DOWN, btnClicked);
function btnClicked(evt:MouseEvent){
	ExternalInterface.call("abrirSB",'img', 'Title', 'images/test_image.jpg');
}

HTML:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>base</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<link href="inc/a.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="inc/shadowbox.css">
	<script type="text/javascript" src="inc/swfobject.js"></script>
	<script type="text/javascript" src="inc/jquery.js"></script>

	<script type="text/javascript" src="inc/shadowbox-jquery.js"></script>
	<script type="text/javascript" src="inc/shadowbox.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		    var options = {
		        resizeLgImages:     true, loadingImage: "images/loading.gif",
		        displayNav:         true, handleUnsupported:  'remove',
		        keysClose:          ['c', 27], // c or esc
		        autoplayMovies:     false
		    };
		    Shadowbox.init(options);
		});
		
		function abrirSB(type, title, url)
			 {
			     Shadowbox.init({skipSetup: true});
			     Shadowbox.open({type: type, title: title, content: url});
		}; 
		
		
	</script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
	if (AC_FL_RunContent == 0) {
		alert("This page requires AC_RunActiveContent.js.");
	} else {
		AC_FL_RunContent(
			'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
			'width', '800',
			'height', '600',
			'src', 'base',
			'quality', 'high',
			'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
			'align', 'middle',
			'play', 'true',
			'loop', 'true',
			'scale', 'showall',
			'wmode', 'window',
			'devicefont', 'false',
			'id', 'base',
			'bgcolor', '#ffffff',
			'name', 'base',
			'menu', 'true',
			'allowFullScreen', 'false',
			'allowScriptAccess','sameDomain',
			'movie', 'base',
			'salign', ''
			); //end AC code
	}
</script>
<noscript>
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="800" height="600" id="base" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="base.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />	<embed src="base.swf" quality="high" bgcolor="#ffffff" width="800" height="600" name="base" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</noscript>
</body>
</html>

**worked** · 08-10-2008, 10:21 PM

So here's a good one. If I have a very simple datagrid with a CHANGE event handler, the ExternalInterface.call() does not work. If I trace(ExternalInterface.call) I receive a value of NULL. Can anyone give me a reason? Thanks!

AS3 Datagrid:

Code:

import fl.data.DataProvider;
import fl.controls.DataGrid;
import fl.controls.dataGridClasses;
import flash.external.ExternalInterface;

bldRosterGrid(aDg);
var aRoster:Array = new Array();
aRoster = [
{Name:"http://localhost:8888/user_auth/1.gif", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"}, 
{Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},
];
aDg.dataProvider = new DataProvider(aRoster);
aDg.rowCount = aDg.length;

function bldRosterGrid(dg:DataGrid){
    dg.setSize(400, 300);
    dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];
    dg.columns[0].width = 250;
    dg.columns[1].width = 250;
    dg.addEventListener(Event.CHANGE, changeHandler);
};

function changeHandler(event:Event):void{
    ExternalInterface.call("abrirSB",'img', 'Title', 'images/test_image.jpg');
}

HTML:

Code:

same as above posts html code

**worked** · 08-11-2008, 07:57 AM

Nevermind it's working now. I forgot to place all the .js files in the inc/ directory

**worked** · 08-11-2008, 11:14 AM

I'm having issues loading .html files and .swf files. I've included the html and swf shadowbox javascript files with still no luck. What needs to be tweaked for this to work? Any suggestions? Thanks!

**k4kartik** · 12-09-2008, 04:30 PM

Hey guys.. thnks for the excellent script..
I m using the thickbox one...
Basically i had a flash site from which i wanted to open a new window without making people to close the page.. i did that..

I m using AS2...and the page is also opening perfectly..
But Just one query..

Suppose i have a flash site.. and on clicking a button , thickbox opens up containing a new webpage.. now if i click on any link inside the thickbox rightnw it is opening it in the new window.. whereas i want the page to be displayed inside the iframe only..
can someone please help me out..

I have used the following scripts

AS2 :-

import flash.external.ExternalInterface;

button_mc.onRelease = function() {
ExternalInterface.call("tb_show",null,"http://www.yahoo.com/?KeepThis=true&TB_iframe=true&height=550&width=100 0",false);
};

you can check out the example on

http://www.atulentppl.com/manzar/

Click on the 2nd tab(middle).. and thn the first image...

Please help me out...

Thanks..

Kartik
reply2kartik@hotmail.com
k4kartik@gmail.com

**kuchiki ness** · 04-02-2009, 08:49 PM

Originally Posted by worked

I'm having issues loading .html files and .swf files. I've included the html and swf shadowbox javascript files with still no luck. What needs to be tweaked for this to work? Any suggestions? Thanks!

yeah me too, i cant load any other media besides images, i tried the setps from the autor's the wibsite to load all palyers, as it seems just the img player was added to the html, but is not working:

Code:

<script type="text/javascript">
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'inc/');

window.onload = function(){

    Shadowbox.init();
};
</script>

could somebody please post a code to make all players to work with flash, preference AS2, i know that this is a AS3 but the threat is aready made... thanks for the help,

**Abelius** · 10-02-2009, 02:44 PM

Yep, very nice script!

Thanks for the detailed description.

**Vega Nadir** · 03-27-2010, 09:17 PM

Sorry to bother you. I'm trying to do this exact same thing. I have a simple text button in SWiSHmax that I'm trying to finaigle to trigger this effect and I just can't seem to figure it out. If anyone is familiar with SWiSHmax and can advise me or just knows what code I can put in for the button in my flash movie as well as for my HTML page it's embedded into and any tweaking I may need to do to the shadowbox files, I'd really appreciate it, please. Thank you.

**Vega Nadir** · 03-31-2010, 08:08 PM

It's working now, should anyone like to know.

http://forums.swishzone.com/index.php?showtopic=69108

**jgnass** · 05-01-2010, 08:37 AM

Hello,

I downloaded the shadowbox code and tried it out. It's mostly working but I'm stuck in two places.

1. The third blue box to the right should be calling a swf and that fails. I know it's named properly.

2. My images don't know that they are in a series (1st two are JPGs and the third is a .swf) and my shadowbox is missing the pagination at bottom.

Here's a link:
http://jimmygnass.com/shadowbox2/Fla...Shadowbox.html

Here's my code in flash. BTW, I'm writing in AS3.

stop();

import flash.external.ExternalInterface;

// - - - - - - - This is an event handler - - - - - - - //
function handleCLICK(event:MouseEvent):void {
if (event.target == myButton1)
{
// handle this event
ExternalInterface.call("abrirSB",'img', 'My Image 1', 'myimage1.jpg');
}
if (event.target == myButton2)
{
// handle this event
ExternalInterface.call("abrirSB",'img', 'My Image 2', 'myimage2.jpg');
}
if (event.target == myButton3)
{
// handle this event
ExternalInterface.call("abrirSB",'img', 'My Image 3', 'myimage3.swf');
}
}

// Now we register the event
myButton1.addEventListener(MouseEvent.CLICK, handleCLICK);
myButton2.addEventListener(MouseEvent.CLICK, handleCLICK);
myButton3.addEventListener(MouseEvent.CLICK, handleCLICK);

// - - - - - - - This is the end of the event handler - - - - - - - //

One more thing, I've tried putting these links in the body of my HTML page using this code:

<a href="myimage1.jpg" rel="shadowbox[Gallery Name]" title="My Image 1">My Image</a><br/>
<a href="myimage2.jpg" rel="shadowbox[Gallery Name]" title="My Image 2">My Image 2</a><br/>
<a href="myimage3.swf" rel="shadowbox[Gallery Name]" title="My Image 3 - Flash">My Image 3</a>

And that works perfectly. I don't have either of the two problems that I've described above, so I'm pretty sure it's in my "ExternalInterface.call".

If anyone knows how I can resolve this, I would greatly appreciate it.

Jimmy

Thread: Shadowbox/Thickbox in flash! (working!)

Thread Tools

Display

Shadowbox/Thickbox in flash! (working!)

Datagrid + ExternalInterface.call not working...

hii

Having two problems with this code

Posting Permissions