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.
jazclick
Posted 9 months agoI am using drupal now . And i would like to ask how can i add flashxml in my website ?
Hi,
We don’t have specific installation instructions for Drupal. However, you could try using the SWFTools consulting this link, or the installation instructions for general websites from the product’s page in order to add the flash to your website.
Devon
Posted 9 months agoHi, just so you guys know it is possible to have multiple image sets using your lightbox solution with your plugins.
that I have done to make it work was the following:
1- in the header:
for the first imge set:
<a id=“img1” title=“First image” rel=“lightbox[img]” href=“wp-content/flashxml/polaroid-gallery-fx/images/01.jpg”></a>
for the secound image set:
<a id=“img01” title=“First image” rel=“lightbox[img]” href=“wp-content/flashxml/polaroid-gallery-fx/images/001.jpg”></a>
—————————————————————————————————————————————————————————————————
In the settings file just add the value of the targeted picture:
<photo image=“images/big/demo1/01.jpg” url=“javascript:GroupDelegate(‘img01’)” target=”_self”> </photo>
———————————————————————————————————————————————————————————————————
As long as your pictures are all in the same location and all with different names and the right path to the picture configured you will ba able to have different image sets on all page of your website using lightbox..
if your like me and hate went some know it all says it can’t be done… When theres a will there is a way..!!
check it out here: www.sanremo.ca
Hi,
Sorry for the inconvenience but at the moment we have under develop to implement ColorBox:http://www.flashxml.net/how-to-use-colorbox-with-a-flash-component.html in our components that will solve this situation.
Again we are sorry for our unprofessional response from the earlier comment.
Devon
Posted 9 months agoHi I wanted to know if there is any advancement in a new release of lightbox to support multiple image sets..?
Thanks
Hi,
Sorry for the inconvenience, but Lightbox is not our product.
Alvaro Martinez
Posted 9 months agoHi, i need to know how i can use this lightbox with an iframe, i have the swf flash inside the lightbox when i click this the lightbox open inside the iframe, i need it over all page,
some one can helpme about this, thanks
Ps
Sorry about my english, my native language is spanish
Hi,
If you’re using it in an iFrame there’s no way you can make it all over the main page.
Kimberly Mendoza
Posted 9 months agoHow can I resize the lightbox to be much larger?
Hi,
You can’t. You have to use bigger images.