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

Chris

Posted 9 years ago

Hah found it !!!

missing js file. uploaded new file and all is now good !!!!!

Great stuff you have here. really nice.

cheers
Chris

Chris

Posted 9 years ago

Hi I am using your image carousel with light box several times on my web site and it is working great except for light box. when i click on an image nothing happens. I have 3 instances of carousel (one per page) with images.xml, images2.xml, and images3.xml etc. I also have carousel running in a seperate folder on the server and this one works fine with light box. website address is www.lowdownink.com/index.html

Thanks for your help
Chris

netco

Posted 9 years ago

sure this is the page where i put the image scroller is:
http://www.studiof64.it/index.php?option=com_content&view=article&id=10&Itemid=11&lang=it

i’m using the free archive to see how it work before to buy it, but don’t think this could be a limitation for the lightbox right?

FlashXML Support

Hi,

I checked your website.
I think there could be some conflicts between all the javascript files that you import and the ones for lightbox.
I would recommend you to make a little test.
Try to remove from your index.php page all the javascript imports and leave only those for lightbox.

netco

Posted 9 years ago

hi, i’m using it with joomla, it works great, but i have a problem for the lightbox.
i have all the code pubblished on a page and the code is:

<link rel=“stylesheet” href=“website/lightbox/css/lightbox.css” type=“text/css” media=“screen” />
<script src=“website/lightbox/js/prototype.js” type=“text/javascript”></script>
<script src=“website/lightbox/js/scriptaculous.js?load=effects” type=“text/javascript”></script>
<script src=“website/lightbox/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>

<script src=“website/swfobject.js” type=“text/javascript”></script>
<script type=“text/javascript”>
var flashvars1 = {};
flashvars1.settingsXML= “website/settings.xml”;
var params1 = {};
params1.scale = “noscale”;
params1.salign = “tl”;
params1.allowscriptaccess = “samedomain”;
params1.wmode = “transparent”;
var attributes1 = {};
swfobject.embedSWF(“website/imagescroller.swf”, “homeDiv”, “760”, “700”, “9.0.0”, false, flashvars1, params1, attributes1);
</script>

<div id=“homeDiv”></div>

can you help me about the lightbox? thanks

FlashXML Support

Hi,

Could you please give me a link to your website?
I’ll check it out.

Minh

Posted 9 years ago

Hi, I have a problem with as3 component. I have installed the as3 component with Adobe Extension Manager CS4, and then integrated it in my as3 fla file. I have generated the simple swf file and then use it with the index-with-lightbox-(test-on-http-server).html file supplied in the archive. I just can’t make the Lightbox work.
I have tried in as2 fla file, it works perfectly.
Do I miss something in as3 fla file ?

FlashXML Support

Hi,

That’s because, for the AS3 version we dispatch an event, when you click on a image.
You could catch this event and use it to open the picture.
Anyway you could send me the archive to support at flashxml.net.
I’ll make it for you.

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