Questions
Answer
Adding Lightbox to Flash
Follow these steps to add Lightbox 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.
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>
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 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')"
Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.
An working example of Lightbox implemented in the way described above you will see in the “index-with-lightbox.html” file from these two archives: dockmenu.zip and carousel.zip files
For a more detailed description visit the original blog post from codefidelity.com
Do you have a question?
you will get an answer in 24 hours, tops.
Edwin Yip
Posted 1 Year AgoI can't see anything after I finished above the script. why ?
Edwin Yip
Posted 1 Year AgoI can't see anything after i finish above the script
snowcat
Posted 1 Year AgoYes Sid,
The best solution is to use the invisible links.
So instead of the code that generates the links from the XML file, you'd better write them manually, like this:
<a id="img2" title="Second image" rel="lightbox[img]" href="images/02.jpg"></a>
Anyway I have updated the code for IE support. I added the "numitor" variable in the code. Download again the archive.
Sid
Posted 1 Year AgoKinda solved the problem with Lightbox in IE showing the wrong picture (click on picture 1 it shows the big image for picture 2. When I click on 3 it shows 6 etc…). It occurs in the code that generates the image links from the XML files in Step 4 above. Fixed the problem by using the invisible links instead.
Steve M
Posted 1 Year AgoHi Snowcat - or anyone with an answer to this..
I've been successful in getting the lightbox to work on my mac - then checked on a pc and doesn't work. Not sure what is happening - the nav text in html darkens so I'm guessing something is being actioned.. but no pic appears.
Here's a link if you can check on pc
http://www.amsfocus.co.uk/MedianetWebsite/What_we_do.html
any new tips appreciated - I've tried everything! this was made from the bought package and images brought in using xml
Thanks for anything
Sid
Posted 1 Year AgoI am having the same problem as Emil where in IE lightbox shows the wrong picture
click on picture 1 it shows the big image for picture 2. When I click on 3 it shows 6 etc…
Has anyone solved this problem. I've set-up an example here...
http://www.osmundasl.com/test%20page2/test%20carousel.html
Martin
Posted 1 Year AgoHi I bought and installed the commercial dock 3.0 I'm using lightbok but it only works on Opera. When I try Safari and Firefox, the dock works but when I click on an image the screen dims but the bigimage never appears. I'm on a mac here, I haven't tested a PC yet
Do you know what the problem colud be?
Here's the link: http://newideaspromo.com/aece/index.html
Thanks
snowcat
Posted 1 Year AgoMany have asked me to show an working sample of Lightbox with one of my products. I provided one in the carousel.zip file (available to download from http://www.flashxml.net/3d-carousel-menu.html )
Thanks
sandra c
Posted 1 Year AgoHi, I purchased your products about two months ago and have since added lightbox to the dockmenu component. It's great, but I'm having a little problem with getting the background overlay to fill the whole page possibly because of the unusually large size of the webpage which doesn't match the flash file.
Would you please point out how I might rewrite the code to cover all of the page? Thanks for a fantastic product and wonderful tutorials on how to use them.
Nick
Posted 1 Year AgoHello,
Will this flashbox not work if you are using a free version of one of your products? I noticed step 6 says to go into the fla file, and those are not provided witht he free version