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.
Devon
Posted 9 months agoHi, I got the lightbox to work on all pictures witch is great however I would like to have different picture groupes for different pages.
Right now I have the pictures from the portfolio page loading in the shoes page in lightbox.
How can I have the pictures in the from the shoes page load in lightbox instead of the pictures from the portfolio?
Many thanks to you guys for the great work and support you provide us.
Hi,
Right now there’s nothing we can do about it but we’re working on a Lightbox alternative that will be possible to have different galleries like you want.
raf
Posted 9 months agoHi
I found my own error with the path of images files (http://...) it works on mozilla firefox but not on Internet explorer
I tried on different computer
Can tou explain the problem?
Thanks
Hi,
Lightbox does not work on Joomla, in Internet Explorer 8, because there’s a conflict between Joomla’s javascripts and lightbox.
Raf
Posted 9 months agoHi,
I have a problem when i click on a image on the carousel.I have the effect lightbox but no image in the window.
The images.xml and settings.xml are good with images format and the lightbox folder is in my template folder.
I tried to get the folder in root of my joomla but without success.
I don’t know what to do and where i made an error.
Thanks for your help.
This is the code in index.php of the joomla template
<head> <jdoc:include type=“head” /> <link rel=“stylesheet” href=”<?php echo $this->baseurl; ?>/templates/system/css/system.css” type=“text/css” /> <link rel=“stylesheet” href=”<?php echo $this->baseurl; ?>/templates/system/css/general.css” type=“text/css” /> <link rel=“stylesheet” type=“text/css” href=”<?php echo $templateUrl; ?>/css/template.css” media=“screen” /> <!—[if IE 6]><link rel=“stylesheet” href=”<?php echo $templateUrl; ?>/css/template.ie6.css” type=“text/css” media=“screen” /><![endif]—> <!—[if IE 7]><link rel=“stylesheet” href=”<?php echo $templateUrl; ?>/css/template.ie7.css” type=“text/css” media=“screen” /><![endif]—> <script type=“text/javascript” src=”<?php echo $templateUrl; ?>/script.js”></script>
<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>
<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>
</head>
Hi,
I checked your site and I noticed that just two images are not displayed in the lightbox window, more exactly: W61.jpg and W70.jpg. Make sure that you write the correct path and extension name for these images, in your case are .png files.
Bo Ebsen
Posted 9 months agoThe problem was random was set to true in the settings file.
Now only one problem persist and that is when i click the images that pops I’m not able to go to the next image it just loads the same every time
Hi,
I have replied to your previous comment about this question. If you want to use Lightbox to create an Image set for Image Scroller FX, you need to follow just the first three steps from this tutorial and to change the value of useLightbox to true in settings.xml.
Bo Ebsen
Posted 9 months agoIm using image scroll fx on http://www.10-4.nu/arkitekthuset/ together with lightbox, everything works except when I click an images the lightbox sort of displays a random image and not the one I clicked.
Any advise?
I have checked the images and the naming is correct :o)
Hi,
I checked your site and I saw that you use Fancybox and the correct image is displayed when you click on a photo. If the problem persists in your case, try to clear your browser’s cache and reload the page. For any other question do not hesitate to contact us.