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

Adrian Salaices

Posted 8 years ago

I am using the 3dcarouselmenufx and I am using it to display shots of “Google/Youtube” Videos, that when pressed then open the webpage directly pointing to the video .
Can something be done to allow the video to be opened up in a LightBox ?

FlashXML Support

Hi,

Try using Shadowbox or Mediabox instead.

Wil

Posted 8 years ago

Hi – Great product.

I have cover flow fx installed on my Joomla site, and I would like to add the lightbox effect. I followed the instructions above for steps 1-3, but from 4 onward the instructions reference an html file. What html file? Does this mean that I embed within the html tags in index.php? Do I embed cover flow into an article, add the head tags and insert the code? Please enlighten.

Thanks in advance!

FlashXML Support

Hi,

The component that you are trying to implement the lightbox to comes already with the colorbox functionality, which is by default installed, but not enabled yet,thing which can be easily done by you. The colorbox functionality is very similar to the lightbox, so it wouldn’t be necessary to install both of them. So, we recommend you to stop implementing the lightbox and start using the colorbox. To enable it, edit settings.xml and make sure that you have

<useColorbox value="true"/>

Philipp

Posted 8 years ago

Hello
i`ve got the photostack on my webseite who is made by joomla. i could start the lightbox, but the pictures would not be loaded.

http://testing.nits.ch/

Witch step does i miss?

thx
Philpp

moises

Posted 8 years ago

Hi, i have followed all the steps to add ligthbox effects in the 3d-carousel-menu-fx but when I click on the picture nothing happens. I have debugged with firebug and one error is appeared: throw $continue” is deprecated, use “return”. I havent modificated the code of the js. Could you help me please?? Thanks

FlashXML Support

Hi,

Please provide a link to page where you are testing our product. And if possible please send the FTP login details to support [at] flashxml.net

webdesign_cds

Posted 8 years ago

many thanks for this great description. I have now tried for so long even to solve this situaion. nochmasl many thanks to the author of the article! very very nice!

FlashXML Support

Hi,

Thank you for your appreciation.

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