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.
khalil
Posted 1 Year Agohello snowcat
i have a problem in the flash
the flash disappears when the lightbox opens
any help?
i used all the steps except for step 5 because i have baught the product of snowcat
thank u
Sandy
Posted 1 Year AgoWhat the heck I can't get the xml to post here...
photo image="images/01.jpg" url="javascript:LightboxDelegate('images/big/01.jpg')" target="_self" ></photo
Sandy
Posted 1 Year Agothe xml did post
""
Sandy
Posted 1 Year AgoAfter playing around with it for a while longer, I'm convinced that the lightbox wipes out the flash site. I did Option B instead of option A, cuz I'm actually playing videos... Is it the xml?
Is it the target="_self" that's wiping out the site? And if so, what do I do to fix it?
Thanks!
Sandy
Posted 1 Year AgoHaving a problem with the carousel and the lightbox. I got the lightbox to work ok, but when I click on a pic in the carousel to load it, the alpha settings are off or something because the flash site disappears. What I mean is that the shadow bg is completely opaque and not transparent at all.
Also, I added 5 more nodes to the carousel XML, so that there are 12 pics in all. I changed the rotation angle to 90 degrees so that the carousel was vertical instead of horizontal. When the images load, the 3rd image loads on top of the second, making the order of the initial load wrong. It straightens itself out when I mouse over, but it looks horrible upon first loading.
What am I doing wrong? The site is supposed to launch Sunday and I need help quick!
Thanks!
Emil
Posted 1 Year AgoHmm, the code didn't show in my comment. Anyhow, the point is to include the dimensions of the video file somewhere in the document write line next to the "title" and "rel" attributes.
By the way Snowcat. I'm still having trouble with IE not showing the right picture in Lightbox. Am I the only one experiencing this problem? Wouldn't it be possible to include a line in the code that basically says that if the browser is IE then divide the number of the picture to show by 2?
Please I wish you could take a look at this for me so that I can finish working on the site.
Thanks,
Emil
Emil
Posted 1 Year AgoIn case anyone is interested I figured out how to show a video in Lightbox with Doc Menu.
You just have to specify the video width and height in the document.write line of the HTML file like this:
document.write("");
Emil
Emil
Posted 1 Year AgoHere is a link in case you want to try it yourself:
http://www.arazzo.net/news.htm
Thanks,
Emil
Emil
Posted 1 Year AgoHi Snowcat,
Thank you very much for helping with having two instances of Lightbox on the same site. It solved the problem perfectly.
I still have the other problem with IE where Lightbox shwos the wrong picture. When I click on picture 1 it shows the big image for picture 2. When I click on 3 it shows 6 etc...
Is anyone else having this problem? Any ideas of what it could be? Should I maybe ask at codefidelity.com?
Thanks for your help,
Emil
leo
Posted 1 Year AgoMy question is on step 6: Modify the getURL function in the FLA file. For option A call: yadayadayada.
Do I have to open dockmenu FLA file in Flash, press F9 (click window -> Action), and insert those getURL functions into Global funcionts. Or do I ignore them and just modify the images.xml file?
Cheers...