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

Adam Brown

Posted 8 years ago

Hello,

I love the tools that you make, and I appreciate the tutorial here. I’m having some trouble with the 3d Wall, Lightbox, and Internet Explorer. I’m using Joomla 1.5, and I’ve installed the 3d Wall FX module that I downloaded from here. Like with a standard Joomla page, I load my modules through index.php in the template. Steps 1-4 (Option B) I followed and placed inside that index.php page inside my template’s main folder. For Step 5 (Option B), I inserted the parameters with the others in the index.html page inside the “flashxml/wallfx” directory. I skipped Step 6 altogether.

In both Chrome and Firefox, everything works well. The user can work through the gallery as per normal and clicking on an image brings it up in a Lightbox slideshow. In Internet Explorer, however, clicking on an image does not activate Lightbox. There are no initial script errors nor any user-side errors generated in Internet Explorer.

If there is any information that you can provide, I would appreciate it.

FlashXML Support

Hi,

Send us a link to your website at : support[at]flashxml.net and we will check it out.

mcruwan

Posted 8 years ago

Hi

First I wan thank you for the examples.

and it is very useful

and i am trying to work on Iframe light box from flash button using your coding
but still out of luck. hope some one can help me on this

Thanks

FlashXML Support

Hi,

Give us the link to your website and we will check it.

Sandra Cheng

Posted 8 years ago

Hi, there-

I’m trying to figure out what’s wrong with a problem I have in a more complicated website by starting from scratch and making the simplest site possible with a dockmenu in flash. I’ve been working on this for a couple of days now, and still have not yet figured out why it doesn’t work.

In fact, the more complicated website is here: cirquela.com where getting to the menu selection “press” will work with Firefox and at one time also Internet explorer, and I was unable to figure out why it wouldn’t also work with Chrome and Safari.

Thank you so much for any responses you are able to give.

FlashXML Support

Hi,

You added

<script type="text/javascript">
function GroupDelegate(id) {
 var objLink = document.getElementById(id);
 Lightbox.prototype.start(objLink);
}
</script>

but you should replace it with this:

<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>

Lui

Posted 8 years ago

Hello, I want to activate the light box from an swf. Any idea with the Action Script? Thank you.

FlashXML Support

Hi,

Lightbox is a free JavaScript application an works only if you’re using the SWF on a website.

Isaiah Banks

Posted 8 years ago

Hello..

I just became a member and purchased your “Dock Menu FX” Photo Gallery Commercial License.

I’m in the process of installing it, but your instructions for the Lightbox w/ previous and next buttons doesn’t seem to consider if you embed the insert code onto your page (or .php page). For instance, <?php dockmenufx_echo_embed_code(); ?>

This code pulls directly from the XML file and doesn’t produce any <img> tags for an anchor tag to wrap around. Any suggestions?

FlashXML Support

Hi,

First of all there’s no need to use the contact form to send us a message and then post the same problem in the comment section. Either way the message gets to the same support team.

About the problem you’re having, make sure you followed carefully the install instructions for lightbox. Note that you have to use the absolute path for the CSS and JS files from step 3.

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