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

Ricardo

Posted 9 years ago

Hi!

Can you help me?

I’m trying to open a link from my xml and it doesn’t work… I don’t want to open an image from lightbox, but an iframe or another website.

The way I have the xml is to open links trough CDATA with <a href=”“ ...

and it doesn’t work… can you help me please?

FlashXML Support

Read the below comment, Arnaud asked the same question. You’ll find the answear there.

Arnaud

Posted 9 years ago

Hello, thanks a lot for your tutorials,
it helped me quite a bit setting up my site,
I just wanted to know if its possible to load and html instead of images or flash movie,

Thank you, have a nice day

Arnaud

FlashXML Support

To load a html page you should use lightwindow. You find below at JP’s comment details on how to use it and from where to donwload it.

JP

Posted 9 years ago

Hi,

My light box is an swf that needs some external parameters.
So, I’d like to know if is there a way to pass a parametized swf (swfobject probably) to be a lighbox. This swf has to receive 2 parameters before being lighboxed…. so, probably I’ll have to create an embed swf with the specified parameter and then lightbox it.

is it possible?

Cheers

FlashXML Support

First of all lightbox don’t handles so good with swf files. So I recommend instead lightwindow.

From here you can download it.
To install it with our component you need to copy all files from lightwindow archive in your project folder and then import in your html all javascript ,css and images files from that you copied from lightwindow archive.

You also find more informations on how to install this javascript feature on their site.

I would also recommend the swf file that you want to show with lightwndow to embed it in different html file for example (lightwindowSwf.html). So basically you’ll show with lightwindow the html file that embeds the swf file and not the swf file.

First to use it with our component you need to write this javascript piece of code in your <head> section in the main html or index.html:

<script type="text/javascript">
     var myLightWindow = new lightwindow();
        function LightwindowDelegate(url,imgCaption) 
        {
     myLightWindow.activateWindow({href:url,params:'lightwindow_type=external,lightwindow_width=600,lightwindow_height=300',caption:imgCaption});
 }
</script>

In your images.xml file at photo tag you write something like this at the url attribute:

url=“javascript:LightwindowDelegate(‘lightwindowSwf.html’,‘SWF File’)”

If you have difficulties installing lightwindow send me a PM.

Caroline

Posted 9 years ago

I have been trying to figure this out for hours and finally stumbled upon your tutorial.
THANK YOU! My lightbox works perfectly now!

Dan

Posted 10 years ago

I have tried integrating the script into an existing Flash site I'm working on. So far I can get the css working when I click on my (dynamic) flash button ie the page darkens but the image and lightbox don't seem to work. The flash is obviously working and the xml file is seeing the .js files for this to happen but I can't see where I'm going wrong. I've added "javascript:GroupDelegate('img1')" into my xml file... Have you any idea what I may be doing wrong?

FlashXML Support

Check if you added this lines in your html at the body section.

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

And make sure you set the proper path for href in anchors tag.

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