Adding Lightbox to Flash
Follow these steps to add Lightbox functionality to Flash files:
Step 1. First, download Lightbox++
Step 2. Copy the css, images and js folders from the archive in the same folder with your HTML file on your web server. This HTML file should embed the SWF file to which you want to add the Lightbox to.
Step 3. Edit the HTML file and add these lines in the <head> section:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
Step 4 (option A). If you want to have a Lightbox Image Set (with Next and Previous buttons), right after the lines from Step 3 add these lines, otherwise go to Step 4 (option B)
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
In the body of your HTML file you’ll have to add invisible links to the images which will be displayed in the Lightbox, like this:
<a id="img1" title="First image" rel="lightbox[img]" href="images/01.jpg"></a>
<a id="img2" title="Second image" rel="lightbox[img]" href="images/02.jpg"></a>
…
Step 4 (option B). If you intend to have a single image display in Lightbox (as opposed to option A with Image set) you simply have to add these lines into the <head> section of the HTML file:
<script type="text/javascript">
function LightboxDelegate(url,caption) {
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox');
objLink.setAttribute('title',caption);
Lightbox.prototype.start(objLink);
}
</script>
Step 5 (option A). If you’re using SWFObject to embed the SWF, make sure you’re having these two params (in addition to maybe other params):
params.wmode = "transparent";
params.allowscriptaccess = "samedomain";
Step 5 (option B). If you’re using <object> </object> tags to embed the SWF file, add these lines:
<param name="allowscriptaccess" value="samedomain">
<param name="wmode" value="transparent">
And in the embed tag you must insert the attribute:
wmode="transparent"
Step 6. If the links to go to when clicking an image are specified through the XML file, the url attribute must be set like this:
1. For Step 4 (option A):
url="javascript:GroupDelegate('img1')"
2. For Step 4 (option B):
url="javascript:LightboxDelegate('images/01.jpg','First Image')"
Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.
An working example of Lightbox implemented in the way described above you will see in the “index-with-lightbox.html” file from these two archives: dockmenu.zip and carousel.zip files
For a more detailed description visit the original blog post from codefidelity.com
Hi,
me again. I should mention that in IE8 I get this error: “‘undefined’ is null or is not an object.”
This refers to effects.js, line 544, char 3
When I look at effects.js I don’t see anything there that makes sense.
Thanks,
-Mike
Hi,
in response to your question, yes, I have tried the tutorial here and it’s not working. Here is my test site: www.mstraka.com/icingstudio/
When you look at the site after the intro, click on ‘doors’ and then you’ll see some photos of doors, they are buttons intended to launch lightbox. Click on any of them, and the whole flash movie just disappears.
This is the actionscript I used on the door buttons
getURL(“javascript:GroupDelegate(‘images/porte01’,‘WineStain’)”);
The door buttons are nested down 4 levels in other clips, does this affect the function?
I am trying to get this to work with Audio files, mp3, mp4, wav, anything for audio clips. please advise!
Hello,
We think that the media box that you will find here would be a good option for you.
Hi,
can anyone explane step-by-step, how to install the lightbox on wordpress? I’m want to use 3d carousel menu fx, but the big images are not displaying. thanks
Hi,
Please give us the link to your website to see what you’ve done so far.
I’m sorry but I’ve tried ALL of the various installation instructions I’ve found to try to get Lightbox to open from within a flash movie but it’s just not happening. I’ve gotten it to work from an html file but not flash.
I’m using Flash CS3, can anybody please give me detailed instructions on how to get this to work?
Thanks so much!
-Mike
Hello,
Have you tried the tutorial that we have here ?
Hello, i already posted yesterday and you told me to copy step 3 and 4b in the post i was making in my site. i just cant figure it out. im using joomla and this lightbox thingisnt working. i feel like a retard and wasting your time. when you say copy those steps, should i copy them into the article post i am making or where, because that is where i am posting it. can you take a look a it please. the admin password is 123456cris. Thank you.
Hi,
I tried to add the lightbox to your dock menus but it’s almost impossible because you’re using Joomla.
Why dont you publish the example of 3DWall with lightbox attribute so we can download and replace with paid one thnks regards
Hi,
What exactly are you trying to do?
Can you clarify step 6 a little bit more pls?
Hi,
On what component are you trying to add lightbox?
I am trying to get lightbox to work in a wordpress theme for 3d carousel, I am lost with this, I read instructions many times, still can’t find the right place to enter the lightbox code. Im having a hard time finding the HTML file I need to edit with step 3 ….
Hi,
You can add the code from step 3 just like adding any other text to your page/post.
Hi, do you know of any way to pull the invisible link code in Step 4 (option A) out of the html and put it into an xml file? I’ve googled “lightbox++ and xml”, but haven’t found anything helpful. Obviously the list of invisible links can get very long if you have a lot of images in the set. I’m using the (paid) Image Scroller, and like the fact that my images are set from an xml file. Having to add a long list of them onto the html page for lightbox to function makes the coding less elegant.
Hi,
If you’re using the latest Image Scroller FX then you have to follow only the steps 1-3.