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.
Ahamd Yousaf
Posted 5 months agoDear Sir,
Sorry for inconvenience, there was a problem of refreshing the server. Previously I was using GreyBox, when I found lightbox++, then I used this. Now the same problem which I’ve already posted.
“in my website I have a button for fullscreen.. When I browse my website in fullscreen mode.. the images with lightbox shows under flash – Stack Overflow… I did wmode to transparent it works fine when its not on the fullscreen mode.. can you please help me in this regard??? thanx for your time…”
On thumbnail of every link I’ve used lightbox++..
Can you please re-view the URL.. Thanks alot for yore precious time…
Hi,
Unfortunately we can only offer support for our products.
Ahmad Yousaf
Posted 5 months agoDear Sir,
I am using this Lightbox++.. working great with my website.. But little problem is coming.. my website is completely in flash no HTML.. in my website I have a button for fullscreen.. When I browse my website in fullscreen mode.. the images with lightbox shows under flash – Stack Overflow… I did wmode to transparent it works fine when its not on the fullscreen mode.. can you please help me in this regard??? thanx for your time…
Hi,
I had a look at your site, but unfortunately, since you are not using Lightbox with any of our products, and since we are not the developers of this script, you need to contact the Lightbox developers about this problem, or read the discussion forums about such a problem.
Wes
Posted 5 months agoI can’t get this code to work. I don’t understand javascript, entirely. I keep trying and trying but it does not work. I don’t know what I’m doing wrong. I did all the steps, to the best of my ability….nothing happens. Please help.
Hi,
I’m sorry but we no longer offer support for our basic products.
Improve traffic
Posted 6 months agoIt is my pleasure to read this page,I look forward to reading more.
Adrian Salaices
Posted 6 months agoI am using the 3dcarouselmenufx and I am using it to display shots of “Google/Youtube” Videos, that when pressed then open the webpage directly pointing to the video .
Can something be done to allow the video to be opened up in a LightBox ?
Hi,
Try using Shadowbox or Mediabox instead.