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

Mladen

Posted 8 years ago

Hi,

I’m trying to get to open some images through Dock Gallery FX using Lightbox in a Wordpress website (option A). My problem is that it seems that Lightbox won’t load. You can see in the source code that all is there, but it won’t start :/
Before this, I tried it with a Lightbox 2 plugin for Wordpress, where Lightbox would start, but clicking on an image, or a direct link to an image, would just open the overlay without the image. I’ll try this method again tomorrow morning to see if I missed something.

Thanks for the great code and for your help

FlashXML Support

Hi,

Make sure that you added the code from step 3 using the absolute path for the CSS and JS files.

DB

Posted 8 years ago

Hi, I ran into a problem where the script is working intermittently. Last night everything was working except for the close button but this morning I can’t get it to execute. It does nothing. I figured it was due to dreamweaver not applying the embed tag when I insert my swf so I quickly rebuilt my page so it now includes an embed tag but it’s still not working. Will executing the script from a different level in flash cause a problem?

Here is some background. I installed the lightbox script in my webpage, copied the js and css folders to my webserver and placed the action in flash that links to a button.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>testsite</title>

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

<style type=“text/css”>
<!— #landingpage { border: 1px solid #999;
}
div { padding-top: 110px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;
}
—>
</style>
</head>

<body>
<div>
<center>
<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” codebase=“http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0” width=“970” height=“532” id=“landingpage”> <param name=“allowScriptAccess” value=“sameDomain” /> <param name=“allowFullScreen” value=“false” /> <param name=“movie” value=“landingpage.swf” /><param name=“loop” value=“false” /><param name=“quality” value=“best” /><param name=“bgcolor” value=”#ffffff” /> <param name=“wmode” value=“transparent” /> <embed src=“landingpage.swf” width=“970” height=“532” loop=“false” quality=“best” bgcolor=”#ffffff” name=“landingpage” allowScriptAccess=“sameDomain” type=“application/x-shockwave-flash” pluginspage=“http://www.adobe.com/go/getflashplayer” wmode=“transparent” /> </object>
</center>
</div>
</body>
</html>

This is my action in flash.

getURL(“javascript:LightboxDelegate(‘images/sample8.png’,‘test’)”, “_self”);

I’ll appreciate any advice you can pass along. Thanks!
BTW, If my code looks like crap it’s because I’m just getting started in web design.

FlashXML Support

Hi,

There’s no need to paste all your code to the comment. Send to support[at]flashxml.net a package with your files and we will check it.

loopy

Posted 8 years ago

Hi,
I don’t get the lightbox activated in combination with joomla. I followed your steps but no success :-(

What I have done so far:

1) I’ve added the following code to the index.php of my template:
<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>

I use the absolute path (this seems to work, when I enter the absolute path into my browser I can download the .js-files)

2) I added the following value to my settings.xml because it just wan’t there.
<useLightBox value =“true” />

Still no luck. What am I doing wrong? Oh and yes, I wanna buy a commercial license ;-)

Thanks for your help.

FlashXML Support

Hi,

Sorry but the lightbox can’t be made to work in Joomla because of some JS conflicts.

Riccardo

Posted 8 years ago

Hi,

I read the article regarding how to implemet Lightbox+ but I don’t understand how to do this in Wordpess.

Can somebody tell me how to have a lightbox up when clicking on an image through an XML image file set using the URL tag? I use the classic [photo-rotator-fx][/photo-rotator-fx] syntax.

Thamk you”

Riccardo

FlashXML Support

Hi,

Open your wordpress post and edit by following the steps above. On step 3 when setting the path of the lightbox give the absolute path.
e.g:

<script src="www.your_page.com/wp-content/flashxml/js/prototype.js" type="text/javascript"></script>
<script src="www.your_page.com/wp-content/flashxml/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="www.your_page.com/wp-content/flashxml/js/lightbox++.js" type="text/javascript"></script>

Joe Coballe

Posted 8 years ago

Hi,
I’m having trouble getting the Ligbtbox part to work with the 3D carousel. I’ve tried both method A and B but no luck.
The current version on the site below is method A. I get the error “elementLink is null” (var anchors = docuement.getElementsByTagName(elemenetLink.tagName).

I’d appreciate any help to get this working.

Is there some bundling pricing for purchasing multiple components? Can I upgrade the license at a later time by paying the difference?

Thanks
Joe

FlashXML Support

Hi,

You’re missing the invisible links:

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

You can upgrade your license type anytime you want from your account.

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