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.
Ricardo
Posted 9 Months AgoHi!
Can you help me?
I’m trying to open a link from my xml and it doesn’t work… I don’t want to open an image from lightbox, but an iframe or another website.
The way I have the xml is to open links trough CDATA with <a href=”“ ...
and it doesn’t work… can you help me please?
Read the below comment, Arnaud asked the same question. You’ll find the answear there.
Arnaud
Posted 9 Months AgoHello, thanks a lot for your tutorials,
it helped me quite a bit setting up my site,
I just wanted to know if its possible to load and html instead of images or flash movie,
Thank you, have a nice day
Arnaud
To load a html page you should use lightwindow. You find below at JP’s comment details on how to use it and from where to donwload it.
JP
Posted 9 Months AgoHi,
My light box is an swf that needs some external parameters.
So, I’d like to know if is there a way to pass a parametized swf (swfobject probably) to be a lighbox. This swf has to receive 2 parameters before being lighboxed…. so, probably I’ll have to create an embed swf with the specified parameter and then lightbox it.
is it possible?
Cheers
First of all lightbox don’t handles so good with swf files. So I recommend instead lightwindow.
From here you can download it.
To install it with our component you need to copy all files from lightwindow archive in your project folder and then import in your html all javascript ,css and images files from that you copied from lightwindow archive.
You also find more informations on how to install this javascript feature on their site.
I would also recommend the swf file that you want to show with lightwndow to embed it in different html file for example (lightwindowSwf.html). So basically you’ll show with lightwindow the html file that embeds the swf file and not the swf file.
First to use it with our component you need to write this javascript piece of code in your <head> section in the main html or index.html:
<script type="text/javascript"> var myLightWindow = new lightwindow(); function LightwindowDelegate(url,imgCaption) { myLightWindow.activateWindow({href:url,params:'lightwindow_type=external,lightwindow_width=600,lightwindow_height=300',caption:imgCaption}); } </script>In your images.xml file at photo tag you write something like this at the url attribute:
url=“javascript:LightwindowDelegate(‘lightwindowSwf.html’,‘SWF File’)”
If you have difficulties installing lightwindow send me a PM.
Caroline
Posted 10 Months AgoI have been trying to figure this out for hours and finally stumbled upon your tutorial.
THANK YOU! My lightbox works perfectly now!
Dan
Posted 1 Year AgoI have tried integrating the script into an existing Flash site I'm working on. So far I can get the css working when I click on my (dynamic) flash button ie the page darkens but the image and lightbox don't seem to work. The flash is obviously working and the xml file is seeing the .js files for this to happen but I can't see where I'm going wrong. I've added "javascript:GroupDelegate('img1')" into my xml file... Have you any idea what I may be doing wrong?
Check if you added this lines in your html at the body section.
<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>
And make sure you set the proper path for href in anchors tag.
snowcat
Posted 1 Year AgoI have changed a bit the instructions on this post, for a better understanding.
This time, if you'll follow the instructions precisely, I'm sure you will not have problems.
Toad
Posted 1 Year AgoOk,
I've cleared out everything on my site, and then uploaded the entire
carousel to the site untouched.
The carousel works fine, and looks good and all, but nothing happens
when I click on a thumb, especially no lightbox.
What am I missing here???
Kevin Simms
Posted 1 Year AgoHello,
I am confused, when I open the carousel.fla file it appears nothing is there. I am trying to Step 6 but don't see any actions or behaviors????
Kevin
Ryan
Posted 1 Year AgoHello.
So I did all of this and it works beautifully... on my mac, and on my girlfriends mac. But when I tried it on a PC
the lightbox shows up underneath the swf. I have gone through the code over and over again and can't seem to
figure it out. Could you give me a hand?
Thanks
Ryan
Chris Wells
Posted 1 Year AgoFor anyone having problems with a flash movie disappearing underneath a lightbox, you must add the hideFlash - showFlash functions to your lightbox++.js file.
//For example at line 387:
start: function(elementLink) {
hideSelectBoxes();
hideFlash();
//For example at line 676:
end: function() {
this.disableKeyboardNav();
var obj = $('lightboxswf');
obj.innerHTML = "";
Element.hide('lightbox');
new Effect.Fade('overlay', { duration: overlayDuration});
showSelectBoxes();
showFlash();
//For example at line 817:
function showFlash(){
var flashObjects = document.getElementsByTagName("object");
for (i = 0; i < flashObjects.length; i++) {
flashObjects[i].style.visibility = "visible";
}
var flashEmbeds = document.getElementsByTagName("embed");
for (i = 0; i < flashEmbeds.length; i++) {
flashEmbeds[i].style.visibility = "visible";
}
}
// ---------------------------------------------------
function hideFlash(){
var flashObjects = document.getElementsByTagName("object");
for (i = 0; i < flashObjects.length; i++) {
flashObjects[i].style.visibility = "visible";
}
var flashEmbeds = document.getElementsByTagName("embed");
for (i = 0; i < flashEmbeds.length; i++) {
flashEmbeds[i].style.visibility = "visible";
}
}