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

daniel

Posted 8 years ago

Hi,

I have a problem with the lightbox, it is not opening when you click on the flash banner. I uploaded the full sample that comes in the zip file and still it doesn’t work! I uploaded the exact intact sample to another website and it worked perfectly. I was wondering what could be the reason.

Thanks!

FlashXML Support

Hi,

It looks like there is a problem with the lightbox++.js file. Your host provider doesn’t allow using ++ in the files name so try to rename the file and also update the new name in the code you added to your page.

Stuart King

Posted 8 years ago

Hi There

I would really like to have this module displaying all our media content on our home page.

I have created a demo page to test but I cannot get anything to display.

What am I doing wrong?

Info greatly appreciated.

FlashXML Support

Hi,

You are missing an important component file from the test page you provided. Please make sure that you have correctly uploaded all the component’s files.
Also, regarding the Lightbox script, I couldn’t see the embedding lines which call the lightbox script. To use Lightbox with our components, you need to add the embedding code in the <head></head> section of the index.php file in your active template.

Stuart Essom

Posted 8 years ago

Hi
I have a problem with Image Scroller and Lightbox.

I am trying to use just normal Lightbox instead of Lightbox++ because I already have Lightbox installed to my server.

All was going fine until I click the thumbnails. Lightbox initialises but cannot find the images. I followed the instructions word for word. Are my paths wrong??

Thanks

Stuart

FlashXML Support

Hi,

The images from the folder big are missing. Please make sure that the big images that are set in images.xml have a relative path to the existing ones in the folder big.

Harry

Posted 8 years ago

Hi,

I’ve updated my XML so that every image reads like that, and I am confident that the files are in the right place. The HTML file is in the root directory and the “lightbox” folder is there as well. The HTML accessing it is:

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

Which is part of code that came with the Image Scroller package. The only thing that I can think may be a problem is that my website building software doesn’t allow “++” as a file name, and changes it to “__”. I’m simply not getting a reaction from clicks I send.

FlashXML Support

Hi,

Please download the component from our site again because I see that you don’t have the latest version. After you will download it, all you need to do is to open settings.xml and set the value for useLighbox to true. If still does not work send to support[at]flashxml.net the login details to your FTP and we will check it.

Harry

Posted 8 years ago

Trying to implement lightbox with Image Scroller. My directory is messy because I followed these directions and then realized per the comments that I didn’t need to because it was already in the Image Scroller code. I’m still unable to get any reaction from my clicks on any images, with any configuration of directories.

Thanks!

FlashXML Support

Hi,

I checked your website and it seems that the files that the lightbox uses can not be found on the directories that you indicated in the embedding code. Please check the path to the lightbox files and make sure that you write the right one. Apart from this, I checked your images.xml and you omitted to edit the url attribute to all the images like this:

url="javascript:LightboxDelegate('images/01.jpg','First Image')
, as well as changing the target attribute to _self as here:
target="_self"

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