Questions
Answer
How to use Lightbox with a flash component
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.
tatiana
Posted 2 years agosorry to bother again,
i very new to this:-(
i make the installations following the tutorial for lightbox,
i use image scroller fx, But when i click on a slide it opens in a new window.. what i make wrong
thanks in advance
www.mentalworks.gr/dental
Hi,
You need to set the target to _self in your images.xml file.
james
Posted 2 years agoThanks
blair
Posted 2 years agoI am trying to get the lightbox to work….here is where i have my files posted.
https://pantherfile.uwm.edu/blaira/www/lightbox/indexa.html
Hi,
Re-download your component because we made some updates to it. Make sure you have the useLightbox attribute from your settings.xml file set to true.
patrick
Posted 2 years agoHi , I have managed to implement the scroll bar integrated with the light box function….I set it to have only a single image display as opposed to an image set…
However when lightbox opens up, the next button will pop up near the close button when I put my mouse near it..when I click “close x” it does not close…it simply goes to the next image….I have double checked all the code and I am not sure what the problem is..I have to click in the blank area for it to close.
any suggestions ?
Hi,
Please give us a link to your website and we will check it.
stifroc
Posted 2 years agoOn a wild hunch I changed the name from lightbox++.js to simply lightbox.js and update my links and now it works great! NOW however I have 3 of my 15 images that do not load. Lightbox just sits there forever with the “loading” graphic. Any idea why? Images 14,13,and 12 do not load.
Hi,
Your images 12, 13 and 14 are not working because in your index.html file you have the wrong path for those images.
All other images have this path:
The images that are not working have this path:
Maybe you type it wrong. Change the path of those images to photos and you’ll have it working.