Questions

Answer

How to use Lightbox with a flash component

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

kofi

Posted 9 years ago

Hi there, I’ve followed the steps till step 6, which I don’t understand at all.

This is what I’ve got so far http://www.koansah.com/dirtyjerks

what i want is to how to have thumbnails connected to lightbox show under the text in the home page, and also if you could show me how i could add it to other pages, I would appreciate it.

I could email you my index and swf file if needed.

Thank You.

FlashXML Support

Hi,

Please provide us the link to the page where you have our component on it.

Chris

Posted 9 years ago

Hello, Me again, from the image scroller thread. I’m from the image scroller thread… I had been having problems getting the lightbox to work. I finally got it to work, however the images wont load in the lightbox when viewed in IE.

Here is my link: http://townelaker.com/cljwebdesign.com

Surely this is a simple fix.

FlashXML Support

Hi,

Please update your images.xml file with the proper value for all <photo> tags. Also, don’t use the absolute path to your images.

penster

Posted 9 years ago

Hi,
I’m also having problems getting lightbox working;
http://www.tikisun.fr/bracelets
I added <useLightbox value=“true”/> to the settings.xml file as I couldn’t see it, and still no luck.

I did place the files from the lightbox++v101 download into the existing folders on the http server such as ‘images’ ‘css’ and’js’ as I couldn’t replace them. (I don’t know if this makes a difference.)

FlashXML Support

Hi,

Please send your carousel archive that you used on your flash project to support[at]flashxml.net and we will check it.

pablo

Posted 9 years ago

Sorry to bother again,

lightbox is working great, but i have 2 lightbox galleries in the same html. When i click “next” button, in the last picture of the 1st gallery, instead of ending there, it starts showing the pictures of the the gallery.

Is there a way to separete those invisible link, so that the last picture don´t get a “next” button?

FlashXML Support

Hello,

Unfortunately, such a functionality is not available..you can not make them work the way you want.

pablo

Posted 9 years ago

Hello, Thanks for the answer.

I remove the 2nd swfobject, but still doesn´t work in IE.
If i use the swfobject that you gave me the flash movie doesn´t even appear.
any idea?

FlashXML Support

Hi,

I see that you added the swfobject.js but the version you’re currently using is 1.5. Please use the latest version from the link I gave you in the previous post.

Do you have a question?

you will get an answer in 24 hours, tops.

(required) Only alphanumeric characters allowed
(required) (will not be published)
Please type a message! Your message is too long! Either try to keep within 1500 characters, or contact our support team via email at support [at] flashxml.net.
(will not be published)
You mistyped the two words!
Can't read? Change the image
Format your comments using Textile: *bold*, _italic_, "link text":address, @code@
Connect to us on Facebook Follow us on Twitter Subscribe to our RSS feed
Copyright © FlashXML.net 2009 - 2019