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

Alex Graham

Posted 8 years ago

Hello Flashxml,

I am working with a facebook iFrame app for FAMU, and I need some help with the 3d carousel in using Lightbox.

If you see here, http://apps.facebook.com/famuboosters/, I am trying to get the lightbox to pop up when you click on the icons…

This is my xml code on images.xml:

<photo image=“images/01.png” rel=“lightbox title=“test test test!”><![CDATA[R.I.T.A.]]></photo>

The images show, the carousel works, i can get links to work, but i cannot get the lightbox to work…

in my index.php, i have the following:

<script src=“Scripts/swfobject_modified.js” type=“text/javascript”></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>

What am i doing wrong?

Thank you for your help!
-Alex Graham, What’s Next Marketing

FlashXML Support

Hi,

As is specified in this tutorial, if you are using step 4A, you need to add those invisible links in the body of your HTML file. Also, for step 4A, a photo tag in images.xml should look like:

<photo image="images/01.jpg" url="javascript:GroupDelegate('img1')" target="_self"><![CDATA[Download the new<br>3D Carousel]]></photo>

If you want to follow the step 4B, in images.xml you need to replace the value of url like in this example:
<photo image="images/01.jpg" url="javascript:LightboxDelegate('images/01.jpg','First Image')" target="_self"><![CDATA[Download the new<br>3D Carousel]]></photo>

Thierry

Posted 8 years ago

Hi

I try to use in 3D caroussel the lightbox and its works for the just closing version but i need a light box with next and Prev button and when i click on image, all the web page go dark but the image don’t open… I’d read and read the code and i don’t see where i’am wrong.

Thanks for help

T.L

FlashXML Support

Hi,

Try to set the absolute path to the jpg file in the value of the attribute href from the html code.
e.g:

 <a id="img18" title="18 - Shaq Fu" rel="lightbox[img]" href="http://www.domain.com/material/cv/10_games09.jpg"></a>

Hakan Alvgren

Posted 8 years ago

Hi! I have downloaded your 3D Carousel component and have tried it together with Joomla through the plugin. I works very well but i have a question on how to enlarge a picture when clicked on. I have read your instructions for Lightbox but from what I can see they are not applicable when using Joomla.

Do you think it’s possible to use Lightbox or are there som other way to enlarge a clicked picture?

Please note that nothing is shown through the link below as I’m still in an evaluation phase.

FlashXML Support

Hi,

I have updated the instructions to take into account Joomla particularities. You need to put the embedding codes in the index.php file inside your Joomla’s active template folder. It will have a structure similar to a regular HTML page. Just add the codes in the <head> section and make sure you copy the lightbox folders inside your template’s folder, otherwise update the filepaths.

tTerry Davies

Posted 8 years ago

Hi
I downloaded the image scroller yesterday which works fine but cannot get it to link to any url’s associated with the images. We are considering buying it for our local community internet tv channnel. Can you give me some advice please.

regards

Terry Davies

FlashXML Support

Hi,

Thank you for showing interest in our product. Make sure the value of useLightbox is false in your settings.xml file. If you’re still having issues with it, send us the link to your website and we will check it.

David Thompson

Posted 8 years ago

I am trying to get Lightbox image sets working in Cover Flow FX.
In the download example there are 10 images all in an existing image set. I would like to have separate image sets for each coverflow image. I am having trouble configuring this.
The HEAD of my HTML file has the lines:
<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> <script type=“text/javascript” src=“swfobject.js”></script> <script type=“text/javascript”> function GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink); } </script>

<script type=“text/javascript”> var flashvars = {}; var params = {}; params.scale = “noscale”; params.salign = “tl”; params.wmode = “transparent”; params.allowscriptaccess = “samedomain”; var attributes = {}; swfobject.embedSWF(“CoverFlowFX.swf”, “CoverFlowFXDiv”, “600”, “320”, “9.0.0”, false, flashvars, params, attributes); </script>

I am not sure how to edit the images.xml file to define the image sets.

Regards

FlashXML Support

Hi,

Do not forget to add these lines between the body tags of your HTML file:

<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 so on, for all the images that you have. Then, edit images.xml with a text editor and at the url attribute write
url="javascript:GroupDelegate('img1')"
while for the target attribute set the value _self. Do this for all the images included in the XML file.

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