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

carO

Posted 10 years ago

Hi Snowcat,

i have used several instances of the Dockmenu in one flash file.
I adapted the variables.That works.
My pb now is :
on a PC eveything appears underneath the embeded flash.(both firefox ans explorer)
On mac :
firefox : works well
safari : It doesnot show images with
Opera : shows images below the embedded flash and buttons do not appear appart frome "close" but does not work.

This time I really need you to comment on this.

Thank you <carO

snowcat

Posted 10 years ago

Hi,

You should make a difference between cats and dogs like this:
In the document.write function the id should be different (id='cats",(i+1)/2,"' and id='dogs",(i+1)/2,"') and rel should be different (rel='lightbox[cats]' and rel='lightbox[dogs]')
You'll have to change in the XML file the url attribute: javascript:GroupDelegate('cats1') and so on

Don't copy-paste anything I just wrote, some characters appear different.

Emil

Posted 10 years ago

Hi again Snowcat,

An other problem I'm having.

I'm using Dock Menu on two pages within the same site, lets call them "cats.htm" and "dogs.htm".

The cats.htm is working fine but with the dogs.htm although it shows the small image fine (meaning that it is reading dogs.xml correctly) what happens is that when I click on the image lightbox brings up the corresponding big image but from from cats.xml instead of dogs.xml

How can this be? What am I doing wrong?

Thanks again,
Emil

Emil

Posted 10 years ago

Hi Snowcat,

I'm experiencing a strange behavior with Lightbox(together with Dock Menu).

With Firefox and Opera it works as expected but with IE when I click on a Dock Menu thumbnail it shows the wrong image in Lightbox. It is always double the number of the image it's supposed to show. In other words if I click on the first thumbnail it shows image number 2. If I click on thumbnail 7 it shows image 14, 10 shows 20 and so on.

I also tried in Chrome but it simply doesn't work. Lightbox creates the overlay but nothing else happens.

I'd appreciate if you could take a look in to this.

Thanks for a great set of scripts.
Emil

carO

Posted 10 years ago

Hello Snowcat,
I managed to get the lightbox to work, but the images appear at the bottom left corner of the screen in the same window and with ony the close button. A top target opens a blank page.

Can you advise on how to solve this?

Thank you <carO

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