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

Ryan

Posted 9 years ago

No I haven’t. The entire site was built in flash so the embedded flash object was automatically done in the html. I actually don’t know if I’m sure how to do it as an swfobject. I am somewhat new to flash and mostly self-taught. I have been learning most of what I’ve done so far by trial and error or trying to remember a bit of what I learned in a foundation class in college.

FlashXML Support

Hi,

I found another solution.
Set the wmode to transparent.

<param name="wmode" value="transparent" />

Ryan

Posted 9 years ago

Hi. Sorry to bug you again, but the external interface didn’t work. I think it is because all of my images are in groups. Each button leads to a set of images. My button in flash looks like this:

on (release)
{ getURL(“javascript:GroupDelegate(‘img9’)”)

}

And that’ what works on a mac. It works on PC but the lightbox shows up underneath the flash object. This is the code for the flash object with the added parameters from this site:

<noscript> <object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0” width=“1050” height=“850” id=“2009website” align=“middle”> <param name=“allowScriptAccess” value=“sameDomain” /> <param name=“allowFullScreen” value=“false” /> <param name=“allowscriptaccess” value=“samedomain”> <param name=“wmode” value=“transparent”> <param name=“movie” value=“2009website.swf” /><param name=“quality” value=“high” /><param name=“bgcolor” value=”#ffffff” /> <embed wmode=“transparent” src=“2009website.swf” quality=“high” bgcolor=”#ffffff” width=“1050” height=“850” name=“2009website” align=“middle” allowScriptAccess=“sameDomain” allowFullScreen=“false” type=“application/x-shockwave-flash” pluginspage=“http://www.macromedia.com/go/getflashplayer” /> </object>

Thanks!

FlashXML Support

Hi,

Have you tried to embed your swf file using SWFObject?

ryan

Posted 9 years ago

Where exactly do I put the external interface? html or flash actions for each button?

FlashXML Support

Hi,

So each button that is pressed throws an event.
You need to use ExternalInterface in the function that treats this event.

Ryan

Posted 9 years ago

I have this loaded and working at http://www.ryanives.net. It works perfectly in Firefox, Safari, and Chrome on MAC. When I try to open this on a PC in Firefox or IE, the lightbox shows up under the flash object. I am ata loss. I have checked the code time and time again and just can’t seem to figure it out.

FlashXML Support

Hi,

You should use ExternalInterface:

e.g
Every time you click on a image you call the ExternalInterface call function:

ExternalInterface.call(LightboxDelegate, url);

In your html page you’ll have the following piece of javascript code:

<script type="text/javascript">
function LightboxDelegate(url) {
 var objLink = document.createElement('a');
 objLink.setAttribute('href',url);
 objLink.setAttribute('rel','lightbox');
 Lightbox.prototype.start(objLink);
}
</script>

Gary

Posted 9 years ago

Hi,

I have lightbox working fine on Mac but need it to work on all browsers, is this possible?

Please let me know and if you need the files I can send them to you.

Thanks,

FlashXML Support

Hi,

The lightbox feature will work on all browsers.
But you’ll need to test it on a local server to see the effect.

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