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.
Niva
Posted one year agoHello. I purchased the commercial license of this component. I was wondering if there was a way to use this gallery on multiple pages with different image directory xml files. I found the assets command in the settings xml, but I’ll need multiple settings xml documents for each different gallery, and I could not find where the JS file calls in the settings. What would you recommend I do? I have different types of paintings I want to be able to display each in their own page.
Thanks~
Hi,
The steps are similar to the ones from this article.
Mario Somma
Posted one year agoHi,
I would like to insert 8 sides several Lightbox-Gallerien in a Flash.
the following steps explained:
Step 1, Step 2, Step 3 and Step 4
in addition, I have complemented in the Flash 8 following lines:
getURL (“javascript:GroupDelegate (‘paper1’)”);
Unfortunately, I get with test the mistake over and over again:
‘Lightbox is undefined’
What do I make wrong?
Hi,
To which of our products are you trying to add Lightbox?
equan
Posted one year agoPlease check out my site and tell me what I doing wrong. the site is flash, and the thumbs are created via xml.
Hello,
You are missing the lightbox.js file from this location yourURL/KTGallery/js/lightbox.js .
enrique
Posted one year agoHi,
Can you just see the source of my website and say me whats wrong please
Thank you very much !!
Hi,
Please make sure that when adding these lines in the embedding code:
you write the source (src) to each file correctly, because there you need to indicate the directory where the files that lightbox uses are located.
John Pfannenstiel
Posted one year agoHi, I have carousel and lightbox up and running on my joomla website but it seems to have broken my top menu. I have carousel load on the “Rental” page under Contact Us. I move my mouse over contact us, the submenu will show but when I moved towards the rental tab, the tab goes away. I believe I have troubleshot it down to this 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>
When I rem out the line with js/prototype.js the menu problem goes away, but my carousel stops working.
site: www.chinesechurch-sandiego.com
joomla administrator login: admin, cCcnewdev
hosting site
www.bluehost.com
login: user – chinesj0 and psw: 4998-cCc92124
The index.php is under templates – theme_church017
John
Hi,
Sounds like the prototype.js code is conflicting with the menu code that you have integrated in the site. Lightbox is an open source code, and you could ask their developers why this conflict appears.
Alternatively you could try to implement other scripts to your page, that have the same effect, like Fancybox