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.
flozig
Posted 10 months agoHi again. Option B only seems to work with one image so I swicthed to option A but once again I must have made a mistake because I cannot see anything now. Thanks in advance again.
Hi,
In images.xml you need to set the value _self for target attribute.
flozig
Posted 10 months agoI’ve added the lightbox functionality to my flash demo and think I followed all the instructions but still it doesn’t work .(it only applies to image1) If there’s something wrong I did I just don’t know how to solve it. Any possible help? Thanks in advance.
Hi,
Please follow step 6->2.For Step 4 (option B) by replacing the url from images.xml.
Jose Antonio Castrejon
Posted 10 months agoHi…
I’m using Image Scroller FX , it works fine when i see it in firefox but not in iexplorer . I’ve another flash animation in the top of the web page. The lightbox is Under the animation but not in firefox. There is a site for test:
http://i-shop.ique.mx
Also i want to aling to the topof the scroller the images, all of them have the same width but not height
any advice ?
Thanks for your atention.
Hi,
The Image Scroller FX makes a best fit for the images. Edit settings.xml and change the value of the attribute thumbWidth, in your case with the present settings, set the value to “300”.
e.g:
Scott
Posted 10 months agoHi,
I LOVE this feature. I have used it on my portfolio websites since day 1. I just finished putting it in my backend site… www.RSHGraphics.com/Test/TestSite It works great in Firefox, Safari and Opera… and they all work great… but when I get on my PC and look up the site with IE, the lightbox seems to pop up behind the swf file.. If you would like to see what I mean go to the website.. click home… and click the first box in the right side of the screen (it should have my old graphic design website name “KOKEAR” displayed)... If you look at it in Internet Explorer you should see the problem. If you have the time, please let me know what I need to change. I am sure it is probably easy but it is now 11 at night and I have been up working on websites for the past 3 days… Any help is greatly appreciated.
Thanks
Scott
Hi,
Lightbox is not a feature developed by us and this tutorial is about how to use lightbox for our components, but I can suggest you to increase the value of z-index for lightbox in the lightbox.css file.
Kirill
Posted 10 months agoHello.
I’m tryin to add light box to photo dragger plugin on my wordpress blog… But it doesnt work!
When im clickin on the picture in Photo dragger, lightbox is going on, but without a picture.
here ist my customization:
header.php of my template:
<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 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>
——————————————————-
here ist my images.xml file:
<photos> <photo image=“images/u0.jpg” url=“javascript:LightboxDelegate(‘images/u0.jpg’)” target=”_self”><![CDATA[<head></head><body></body>]]></photo> <photo image=“images/u1.jpg” url=“javascript:LightboxDelegate(‘images/u1.jpg’)“target=”_self”><![CDATA[<head></head><body></body>]]></photo>
</photos>
where is my mistake??
pls help me
Hi,
First edit images.xml and make sure that the files has the same format as our xml file. For e.g the code line below is not set correctly. It has attribute that should not be there.
The lightbox is not loading because the path to the files is not set correctly.