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

Jean-Michel

Posted 9 years ago

Hello and thank you for your nice plugins

I am French and I’ve been selling websites built with a wordpress solution for two years

I have bought a commercial licence for my main site this week and i am trying to understand how each plugin works in order to show them to my customers hoping i could resell them (Of course with a licence, you could see it on my pages)

Everything is fine except i can’t active the lightbox function.

I am using wordpress 3.0.1 with the plugin lightbox 2.9.2 and when i click on an image it seems that lightbox opens but don’t load the image (for exemple 3d-carousel-menu-fx at this adress : http://www.mon-site-internet-pas-cher.fr/exemples/images-et-sons/images-3d

I tried to use your solution (adding light box to flash) but it seems i missed something,

I have followed the instructions from step 1 to step 4, i ve found (step 5) the “params.wmode = “transparent”;”
in the index file of 3d-carousel-menu-fx but not the “params.allowscriptaccess = “samedomain”;” so i changed the relative url in the images.xml file with absolute url :http://www.mon-site-internet-pas-cher.fr/exemples/wp-content/flashxml/3d-carousel-menu-fx/images/big/01.jpg where i found the “url=“javascript:GroupDelegate(‘img1’)” script (step 6)

It stil does not work even if i desactivate the lightbox pluging (In this case even the lightbow effect does not open)

Could you help me ?

Thank you for your answer

FlashXML Support

Hi,

As specified in this tutorial, you also have to add the invisible links for your images.

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

Kirk

Posted 9 years ago

Hi there, I would just like to comment on your products, they are fantastic and is just what I needed to help rebuild my site. I have a problem though. I have managed to get the coverflow to work, but wanted Lightbox to feature as well. My problem is I have a few images working with Lightbox, but in the same coverflow others aren’t.

www.shadepioneer.co.uk/photography

Specifically the image of the Black MK3 Golf and all of the images with borders starting from the grey image. I don’t understand why some work and some don’t. Could you shed any light please?

Regards

Kirk

FlashXML Support

Hi,

I checked your website and it seems that you find the source of the problem.
Please don’t hesitate to contact us if you encounter more problems.

Wayne Bozer

Posted 9 years ago

Can I use the same 3D carouser I purchase for my Index page on another page in my web site (Unit 145) with differant pictures?

FlashXML Support

Hello,

Yes, it is possible. You will find a tutorial here . You’ll have to alter the code a bit though, in the sense that the 2nd part of the tutorial is meant to be put in another page, not on the same one.

Michael Coyne

Posted 9 years ago

I am using wordpress.

With regards to lightbox large image – I have tried making absolute links in both index.html and on the page where I am adding the tags.

The two you have tried to help before evidently havent got this working either.
Has anyone got this to work in wordpress?

I understand this “plugin” requires html editing which is hardly good for wordpress clients….Shame as effects are v.good.

FlashXML Support

Hi,

Give us the link to your website and we will check it.

Tom

Posted 9 years ago

Hi,
I followed all the instructions for the 3d carousel but the lightbox doesn’t seems to work. The carousel loads fine but the lightbox won’t work. when I clicked on the image it just says “error on page”. My site is http://www.bestspaandnails.com/test2.html. I wonder if you can help. Thanks.

FlashXML Support

Hello,

That is because it is missing the lightbox++.js file from the js folder.

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