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

Karolina

Posted 8 years ago

I ‘ve got a problem with Lightbox I guess I did what you told i FAQ but when I’am clicking on the thumb apears just black transparent layer on the screeen without the enlarged photo.

I applied this just to one subpage – i mean lightbox – when i put lightbox in index site the script for image-scroller doesn’t work
In the site where I wanted the lightbox working I put such tags:

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Untitled Document</title>
<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>

<script type=“text/javascript” src=“swfobject.js”></script>
<script type=“text/javascript”>
var flashvars1 = {};
flashvars1.settingsXML= “settings1.xml”;
var params1 = {};
params1.scale = “noscale”;
params1.salign = “tl”;
params1.wmode = “transparent”;
var attributes1 = {};
swfobject.embedSWF(“ImageScrollerFX.swf”, “ImageScrollerFXDiv”, “600”, “300”, “9.0.0”, false, flashvars1, params1, attributes1);
params.wmode = “transparent”;
params.allowscriptaccess = “samedomain”; </script>
</head>

<body>
<h1 class=“style1”>Kurtyny wodne</h1>
<br/>
<center>
<img src=“zdjecia/zdj17.jpg” border=“0”/>
<br/>
<br/>
<div id=“ImageScrollerFXDiv”>
<a id=“img1” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/1.jpg”></a>
<a id=“img2” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/2.jpg”></a>
<a id=“img2” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/3.jpg”></a>
<a id=“img2” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/4.jpg”></a>
<a id=“img2” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/5.jpg”></a>
<a id=“img2” rel=“lightbox[img]” href=“images/zdjecia/akcesoria/atrakcje/kurtyny/6.jpg”></a>
</center>

And it works as I wrote ;/

FlashXML Support

Hi,

I checked your website and you skipped step no.6.

Frank

Posted 8 years ago

Hello,
We are testing the free version of 3-d carousel menu and fully intend to purchase the paid version if things work out correctly.

The menu carousel is beautiful and m, as such, suits our need perfectly. We are using your joomla module ( with joomla1.5.21 ) and want to incorporate a lightbox feature in it to enlarge images when clicked.

I have the module embedded in the article I want to use and it works well, but am lost now as to how to incorporate a lightbox into the module.

Any help you can give will be appreciated.

Thanks,
Frank

FlashXML Support

Hi,

Insert the code from the steps 3 and 4 right before the </head> tags in the index.php file of your template and make sure that you set the correct path those files. If your site is not online we can’t figure out where the problem is.

Scott Glover

Posted 8 years ago

Hi there i am testing the free version of the dock menu. Everything is loading up ok and working. the thing i am struggling with is :

When i click on the thumbnail it doesn’t load up the bigger image – (the hello, and the sun logos)
i would like to make the thumbnail different from the image it should load – for example, when you click on the “hello” logo it will load up the JPG of the article.

would this be possible?
please advise, thanks

Scott

FlashXML Support

Hi,

In order to make the image expand you will need to install the Lightbox script to your page. Just follow the installation steps, 1-2-3-4a-5a-6a, or 1-2-3-4b-5a-6b.
To change the thumbs and the expanded image you will need, depending on the installation adopted, to either change the expanded image defined by the

<a id="img1" title="First image" rel="lightbox[img]" href="images/01.jpg"></a> or the <a url="javascript:LightboxDelegate('images/01.jpg','First Image')"></a>
so that they point to something other than the original thumbs.

DS

Posted 8 years ago

I’m very new to this and wanted to add the lightbox functionality. The Image Scroll works but I can’t seem to get the LightBox function working. I have a Gallery.html page and that is where I’m trying to add it too.

FlashXML Support

Hi,

We’ve checked out your web-page and Lightbox was running OK, IE, Firefox, Safari & Chrome. If you encounter anymore problems please let us know.

Peter Birlem

Posted 8 years ago

Great tutorial. I’m having a problem as I’m using flash accordion that calls the URL’s for each panel from an XML file. How do I format the following correctly, so that I can call my first lightbox image?:

url=“javascript:LightboxDelegate(‘images/01.jpg’,‘First Image’)”

I want the first URL link below, to access the lightbox panel

<item> <url>/about-wilde-agency/process-and-philosphy/</url> <target>_parent</target> <image>acc_images/01.jpg</image> <smallImagePos>left</smallImagePos> <title><![CDATA[]]></title> <description><![CDATA[ ]]></description> </item>

FlashXML Support

Hi,

What product of ours are you using?

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