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

Wayne Bozer

Posted 9 years ago

I cannot get the adding lightbox to flash to work when I click on the thumbnail in carousel.

I’am using this in my main index.html.

<div class=“c1” id=“CarouselDiv1”> <iframe src=“3D%20Caracel%20Info%20this%20is%20the%20one%20I%20paid%20$12%20for/index.html” width=“650” height=“250” scrolling=“no” frameborder=“0”></iframe><br> </div>

and this in the carousel index.html.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”> <head> <title></title> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” /> <script type=“text/javascript” src=“swfobject.js”></script> <script type=“text/javascript”> var flashvars = {}; flashvars.settingsXML = “settings.xml”; var params = {}; params.scale = “noscale”; params.salign = “tl”; params.wmode = “transparent”; params.allowscriptaccess = “samedomain”; var attributes = {}; swfobject.embedSWF(“carousel.swf”, “CarouselDiv”, “600”, “400”, “9.0.0”, false, flashvars, params, attributes); </script> <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> <script type=“text/javascript”> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); } </script> </head> <body> <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> <a id=“img3” title=“Third image” rel=“lightbox[img]” href=“images/03.jpg”></a> <a id=“img4” title=“Fourth image” rel=“lightbox[img]” href=“images/04.jpg”></a> <a id=“img5” title=“Fifth image” rel=“lightbox[img]” href=“images/05.jpg”></a> <a id=“img6” title=“Sixth image” rel=“lightbox[img]” href=“images/06.jpg”></a> <a id=“img7” title=“Seventh image” rel=“lightbox[img]” href=“images/07.jpg”></a> <div id=“CarouselDiv”> <a href=“http://www.adobe.com/go/getflashplayer”> <img src=“http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=“Get Adobe Flash player” /> </a> </div> </body>
</html>

FlashXML Support

Hi,

I checked your website and it works ok. Let us know if you’re still having issues with it.

Bartosz Ornatowski

Posted 9 years ago

Thanks for the answer, but that’s not quite what I had on mind. What I want is:

<a href=“pageflipper.swf” rel=“lightbox1“>Set 1</a> – this one uses file settings.xml
<a href=“pageflipper.swf” rel=“lightbox2“>Set 2</a> – but that one uses mysettings.xml

When I set 2 (or more) settings files, I can easily put them on a site by adding several flashvars and then:

<div id=“set1”></div> and <div id=“set2”></div>

but the idea is that the images appear animated by pageflipper.

FlashXML Support

Hi,

I see what you mean now.
Well there is a flashvar that you can use in your html file (in the embedding code):

e.g.

flashvars.settingsXML = “mySettings.xml”;

This way you’ll be able to load any settings you like.

Bartosz Ornatowski

Posted 9 years ago

I am referring to PageFlipper FX. I’d like it to work like this: There are several links on a site, after clicking on one of them – PageFlipper appears in lightbox, and each one of them has a different set of pictures.

Thx

FlashXML Support

Hi,

Following the above tutorial at the step 4a there is a tag:

<a id=“img1” title=“First image” rel=“lightbox[img]” href=“images/01.jpg”></a>

You can create similar tag for different sets:

e.g.

<a id=“img1” title=“First image” rel=“lightbox[img1]” href=“images/01.jpg”></a>
<a id=“img1” title=“First image” rel=“lightbox[img1]” href=“images/01.jpg”></a>
<a id=“img1” title=“First image” rel=“lightbox[img1]” href=“images/01.jpg”></a>

<a id=“img1” title=“First image” rel=“lightbox[img2]” href=“images/01.jpg”></a>
<a id=“img1” title=“First image” rel=“lightbox[img2]” href=“images/01.jpg”></a>
<a id=“img1” title=“First image” rel=“lightbox[img2]” href=“images/01.jpg”></a>

The above images have at rel the following values lighbox[img1] and lightbox[img2].
When you click on a image (with lightbox[img1]) you can navigate with lightbox through all images that have the same rel.

Bartosz Ornatowski

Posted 9 years ago

I want to display my component in different lightboxes with different settings. I know how to do that on a page one after another, but I just can’t find the way to do that with lightbox. How can I make it read settings other than default?

FlashXML Support

Hi,

Can you please tell me to what component are you referring?

Roberto

Posted 9 years ago

I m using the image scroller and i m trying to implement lightbox.
I used the Add lightbox to Flash but i can’t get it to work proper.

Can you help me with this matter?

thnx Roberto

FlashXML Support

Hello,

For the image scroller you only need to follow step 3 of that tutorial and then open your scroller’s settings.xml file and change the value of the useLightbox attribute to “true”.

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