Questions
Answer
Adding Lightbox to Flash
Follow these steps to add Lightbox (possibility to pop-up only images) 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.
If your site is running on Wordpress or Joomla, you will need to copy these folders in a new folder, let's call it lightbox, in the root of your Joomla/Wordpress site.
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>
Make sure you use the correct path for the above files.
For Joomla or Wordpress sites, you need to update the code, to make it point to the root lightbox folder, where you copied the Lightbox folders in step 2:
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox++.js" type="text/javascript"></script>
If your site is running on Joomla, you will need to add the code right before the </head> tag of the index.php file located in your active template's folder (e.g. templates/rhuk_milkyway/index.php).
If your site is running on Wordpress you need to add the code in the <head> section of the header.php file located in your active theme's folder (e.g. wp-content/themes/twentyten/header.php)
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, or in some cases the link 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')"
Also, you’ll have to change the target attribute to _self like this:
target="_self"
Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.
For a more detailed description visit the original blog post from codefidelity.com
Comments
Do you have a question?
you will get an answer in 24 hours, tops.
myles chaput
Posted 10 months agohaving problems with the photowall, i have done all the code like it says in the instructions for the first two pictures only, but the lightbox isn’t happening! Please check it out and help me out:
http://winnipegshutter.ca/Home.html
Hi,
Also edit settings.xml and change the value of the attribute *click * to “open”.
e.g:
myles chaput
Posted 10 months agotrying to use this with the photowall, so far i have emebed the code needed to make this work for the first two pictures, but its not working! Please help.
Myles Chaput
Posted 10 months agocan’t seem to get it to work, i’m testing it only on the first picture just to see if i want to use something like this, and have followed the steps, but its not working.
Alex Graham
Posted 10 months agoFlashxml,
Thank you all so very much for helping me on this project! I got the lightboxes to work and i got passed whatever mental block was keeping me from getting this going.
Thank you all very much, my company will be purchasing your software bit by bit as time progresses. Keep up the amazing support and hard work!
Alex Graham
Posted 10 months agoHello Flashxml,
I am working with a facebook iFrame app for FAMU, and I need some help with the 3d carousel in using Lightbox.
If you see here, http://apps.facebook.com/famuboosters/, I am trying to get the lightbox to pop up when you click on the icons…
This is my xml code on images.xml:
<photo image=“images/01.png” rel=“lightbox title=“test test test!”><![CDATA[R.I.T.A.]]></photo>
The images show, the carousel works, i can get links to work, but i cannot get the lightbox to work…
in my index.php, i have the following:
<script src=“Scripts/swfobject_modified.js” type=“text/javascript”></script>
<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>
<script type=“text/javascript”>
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
What am i doing wrong?
Thank you for your help!
-Alex Graham, What’s Next Marketing
Hi,
As is specified in this tutorial, if you are using step 4A, you need to add those invisible links in the body of your HTML file. Also, for step 4A, a photo tag in images.xml should look like:
<photo image="images/01.jpg" url="javascript:GroupDelegate('img1')" target="_self"><![CDATA[Download the new<br>3D Carousel]]></photo>If you want to follow the step 4B, in images.xml you need to replace the value of url like in this example:
<photo image="images/01.jpg" url="javascript:LightboxDelegate('images/01.jpg','First Image')" target="_self"><![CDATA[Download the new<br>3D Carousel]]></photo>