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

Xenia Kuhn

Posted 8 years ago

My lightbox works perfectly in Firefox and Safari. But I have some problems in Internet Explorer. My “About” and “Illustrations” sections work perfectly in Internet Explorer, but the rest sections don’t. If I click on the pictures nothing happens. I checked all my codes, but I can’t find the mistake. Can you please help me.

FlashXML Support

Hi,

Lightbox is a functionality that we use in our flash components, and we only offer support for issues related to its implementation into our products. Sorry, but we do not offer assistance for lightbox issues occurring in other circumstances.

TJ Nigro

Posted 8 years ago

The page I’ve added 3D Carousel Menu FX to has 7 link buttons. I have added images to the first page (Birthday) and another page (New Baby) to test before I do them all. All of the 7 pages use 3D Carousel Menu FX successfully and is working correctly.

I also added the Lightbox++ code (although I had to rename it Lightboxplusplus to make it work on my Godaddy hosted site. The first page I created, “Birthday” works perfectly (both 3D Carousel Menu FX and Lightbox++)

On the second page, “New Baby” which is a duplicate of the “Birthday” with the name, settings.xml/images.xml files changed, the Lightbox functionality will not work. The 3D Carousel Menu FX works fine on this and the other pages.

How do I make the Lightbox function work on all 7 of these pages?

FlashXML Support

Hi,

I checked your problem with Lightbox and the issue derives from the text that you had written in the images.xml file for the Lightbox description on this line:

url="javascript:LightboxDelegate('images_newbaby/boy_celestial.png','#21 It's A Boy Celestial')"

The apostrophe that you included in the text ‘#21 It’s A Boy Celestial’ produces a conflict with the apostrophes belonging to the XML-based markup language and it produces a confusion when the lightbox reads the XML content. That’s why it necessary to provide a different notation for the apostrophe that you include in the text. So, please rewrite all the description texts that have apostrophes, like in this example:
url="javascript:LightboxDelegate('images_newbaby/boy_celestial.png',''#21 It&#8217;s A Boy Celestial'')"

I replaced “ ‘ “ with “ &#8217; “.

TJ Nigro

Posted 8 years ago

I purchased the registered version. I am have a problem making this work.

Can you look at the url below and tell me what I’ve missed?

Thanks so much.

FlashXML Support

Hi,

First, you are missing 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>

Second, you are missing the lightbox++.js script from this location
http://www.villagegardensweddings.com/Balloons/Birthday/js/lightbox++.js
Third, you need to change the target to _self for all the images in the images.xml

geoff smith

Posted 8 years ago

great script … however, I cannot link to the Lightbox … I know I have made a mistake in the configuration. Can you please help me out here … thanks

FlashXML Support

Hi,

I checked your website and you missed steps 5 and 6 from the installation instructions provided on this page. Also, in the embedding code you added these lines

<script type="text/javascript">
function GroupDelegate(id) {
 var objLink = document.getElementById(id);
 Lightbox.prototype.start(objLink);
}
</script>
but you misspelled the script closing tag. Please correct that. If you follow all these instructions carefully, the lightbox functionality will work as expected.

flozig

Posted 8 years ago

Thanks to your help I’m finally making this software work in my site, alhough I progress a little slow. Is it possible to see a web page inside of the lightbox once it is displayed in its bigger size in the center of the page? And if I want a second carrousel to work as a sub-menu, can I use the same folders o should I create duplicated ones? I would also like to get rid of the text on the lower frame of the ligthbox that indicates (for example) “image 1 of 8”. Is this possible? And one more thing. Can I change the size of the area where I must click in order to go from a lightbox to the next one? Thanks in advance.

FlashXML Support

Hi,

Regarding to the first matter is not possible. As for the second matter regarding making sub-menus can you please give more details on the matter?

We do not have info regarding the last matter. Lightbox is not our product. Please contact their development department.

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