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

vinod

Posted 9 years ago

Hi,
I have issue with all the browsers only when triggering the event from flash,
The issues is height i have iframe where i am loading html page, scrolling :‘no’ for iframe for the content i have given overflow and height from the text link there is no issue only for flash.
browsers having favorite bar and other tool bar’s height fixing itself even increasing height $.fancybox({href:url, type:‘iframe’, width:752, height:600, scrolling:‘no’});
I have provided link to the issue visit and enable toolbars as many as and click the dots in flash and provide me the solution
thanks

FlashXML Support

Hi,

I’m sorry but we can only provide support for our products.

Intenix

Posted 9 years ago

Hi team,
We have purchased 3d carousel menu FX
I am getting following JS error in Error console on page load.
Element style is undefiend, I have further checked and found this error is coming for creating div element “outerImageContainer” setWidth: function(element, w) : fires this error and stop further execution.
I have implemented this and working correctly with static html page.
But in actual scenario I would need to bind data in run time also the java scripts get added from .net code behind.
Will this causing the issue?
I do not have permission to provide you working links.
Could you please suggest me any solution?

FlashXML Support

Hi,

Do you use mootools on your webpage?

gerrit

Posted 9 years ago

Hi,
I try to use the image scroller in a wordpress page, but the lightbox doesn’t work
http://www.trendscope.de/unternehmen/team
Do you have any idea? I already put the code you mentioned above in the header.
By the way: Really great tools, thank you!!
Gerrit

FlashXML Support

Hi,

First, remove the code you added because it’s good only for that person’s website.

You have to add this code:

<link rel="stylesheet" href="http://www.trendscope.de/wp-content/flashxml/image-scroller-fx/css/lightbox.css" type="text/css" media="screen" />
<script src="http://www.trendscope.de/wp-content/flashxml/image-scroller-fx/js/prototype.js" type="text/javascript"></script>
<script src="http://www.trendscope.de/wp-content/flashxml/image-scroller-fx/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.trendscope.de/wp-content/flashxml/image-scroller-fx/js/lightbox++.js" type="text/javascript"></script>

in the same post/page where you added

[image-scroller-fx][/image-scroller-fx]
just like adding any other text.

jeroen

Posted 9 years ago

Hi There,

Great apps, but I have a problem with lightbox when installed under Wordpress.
What are the steps i Have to take?

I already added the following lines to the header:
<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 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 (b) was already done

But I can’t get it to work.

I hope you can help me.
Thank you

FlashXML Support

Hi,

You only have to add this code in your header:

<link rel="stylesheet" href="http://www.emerioholland.nl/wp-content/flashxml/image-scroller-fx/css/lightbox.css" type="text/css" media="screen" />
<script src="http://www.emerioholland.nl/wp-content/flashxml/image-scroller-fx/js/prototype.js" type="text/javascript"></script>
<script src="http://www.emerioholland.nl/wp-content/flashxml/image-scroller-fx/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="http://www.emerioholland.nl/wp-content/flashxml/image-scroller-fx/js/lightbox++.js" type="text/javascript"></script>

and also make sure you have the useLightbox attribute set to true in your settings.xml file. No other modification are required to the original files.

blade

Posted 9 years ago

check my link http://www.tiendaalondras.com/

i have tried with the two examples that you put in the tutorial, and i can not get succes about the lightbox, please check my website, and tell me about the solution,
also i saw others tutorials about the lightbox, but it is explain without xml.
note: im using joomla 1.5
thanks for answer me
glod bless you

FlashXML Support

Hi,

First of all we have a Joomla extension for every FX product we have and I would recommend you to use that instead of adding the embedding code yourself. But you want to do it this way, than make sure you use the absolute path to all the files from the code you added because this is the reason it’s not working.

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