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.
Stifroc
Posted 4 Months AgoI have loaded the image scroller. The scroller scrolls my images very nicely. I cannot get anything to happen when I click on an image though. I have followed the steps for adding lightbox.
I have created little thumbs of my images to look like a film strip. When you click on one of those I want it to call to the large unedited version. I believe that I have all of the locations and code navigations correct. I have gone over the code 3 times here comparing to your tutorial and I cant find where I made the mistake.
http://www.mattcorfits.com/
Thanks
Hi,
Your lightbox++.js file is missing. Upload it to this path: http://www.mattcorfits.com/js/lightbox++.js and you should have your Lightbox working.
Starmonkey
Posted 4 Months AgoHi,
i’m trying to upload the file of the scrollbar i’m using for my portfolio website gallery section on line but it doesn’t work.
if you want to have a look this is the site address: www.starmonkeydesign.com
thanks in advance
Starmonkey
Hi,
What exactly do you mean? Can you be more explicit?
Davide
Posted 4 Months AgoI have this kind of error with Internet Explorer 8
In Firefox and Safari it works fine.
Can somebody help me??
Thanks very much!
This is the error:
Agente utente: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Fri, 30 Apr 2010 12:56:53 UTC
Messaggio: Proprietà o metodo non supportati dall’oggetto
Linea: 567
Carattere: 3
Codice: 0
URI: http://www.sartoriasabino.it/js/effects.js
Hi,
It seems that you have a JavaScript conflict between Lightbox and Rokbox. Try to use only one, not both at the same time.
Greg Buchanan
Posted 4 Months AgoHow do you call this from within flash?
I am using this AS3 code for my button and it won’t work:
info_mc.image1_btn.addEventListener(MouseEvent.CLICK, getImage1);
function getImage1(evtObj:Event):void { var Image1:URLRequest = new URLRequest(“javascript:GroupDelegate(‘http://gelfuzion.com/p3m/images/01.gif’)”); navigateToURL(Image1);
Here is the URL: http://gelfuzion.com/p3m/index_flash_lightbox2.html
If you click on the P3M Info button then the orange box you can see what I am trying to do, the orange box will be a picture.
}
Hi,
First, you should use Step 4 (option B).
Secondly, you should use this code for your button:
info_mc.image1_btn.addEventListener(MouseEvent.CLICK, getImage1); function getImage1(evtObj:Event):void { ExternalInterface.call("LightboxDelegate", "http://gelfuzion.com/p3m/images/01.gif", "Image Title"); }Gary
Posted 4 Months AgoHi again
Thanks for the previous help, i managed to get it to work. I have now managed to get lightbox to work in my own flash file using yur above tutorial, however it works ok in IE version 7, but it will not work in firefox.
Here is my link http://www.proposedsite.co.uk/lightbox2/test01.html
I created a very simple flash file and created a button which has the following code applied to it;
on (release) { getURL(“javascript:LightboxDelegate(‘images/01.jpg’,‘First Image’)”);
}
Please could you tell me why it will not work in firefox? Thanks again, i really appreciate the help.
Hi,
You have to move the wmode=“transparent” attribute in the embed element.
Like this:
Pedro
Posted 4 Months Agohere is the adress:
http://inter-net-proprete.com
it’s a joomla, may be I have a conflict with the other lightbox on it which is the JCE one…?
but everything work fine else than IE7!
thx
Hi,
We checked your website using most of the browsers, including IE7 and everything works ok.
You can try to install a different JavaScript application.
This is a small tutorial on how to install Shadowbox with our products.
After you install the Shadowbox using the tutorial from the shadowbox official site.
You need to specify in your images.xml file at the url attribute the following line:
url="javascript:GroupDelegate('images/01.jpg','img','First Image')"Next you’ll need to write in your html file that embeds the swf the following block of javascript code in the head section (<head></head>)
<script type="text/javascript"> function GroupDelegate(url,player,title) { Shadowbox.init(); Shadowbox.open({content: url, player: player, title:title}); } </script>Gary
Posted 4 Months AgoHi
I am desparately trying to incorporate lightbox in my flash file, so i downloaded your dockmenu.zip and uploaded to see how it works. However, when i click on the thumbnails, the large image does not pop up. What am i doing wrong?
http://www.proposedsite.co.uk/lightbox/index-with-lightbox-(test-on-http-server).html
Thanks
Hi,
Your prototype.js file from js folder is empty. Use the initial one and this will solve your problem.
jersa
Posted 4 Months Agoi purchased a scroll bar fx to use in flash, this is very dificult to me, i dont know how to use it, if is posible show me a simple tutorial to try to use, thank yous
Hi, if you are referring at Image Scroller FX, try this tutorial.
Pedro
Posted 4 Months AgoHi
I couldnt make the Lightbox ++ work on IE7, everything is OK on FFox. Why?
thx
Hi,
Please give us a link to your website and we will check it.
Jamie
Posted 4 Months AgoScratch 2)! I think I got the lightbox function working (pretty sure…). :F
But I still need some assistance with getting the text in the rollover to display (via tooltip).
Thanks!
Hi,
You should try to use option B on step 4 and this will resolve your problem.