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

LaSalle

Posted 9 years ago

What should the “images.xml” path be? My photos are in a folder named “images”.

FlashXML Support

Hi,

Ok, I see that you specified the correct path to your images.
Now in your html file instead of this piece of javascript code:

<script type="text/javascript"> 
function GroupDelegate(id) {
 var objLink = document.getElementById(id);
 Lightbox.prototype.start(objLink);
}
</script>

Try to specify something like this:

<script type="text/javascript">
function GroupDelegate(url,caption) {
 var objLink = document.createElement('a');
 objLink.setAttribute('href',url);
 objLink.setAttribute('rel','lightbox');
 objLink.setAttribute('title',caption);
 Lightbox.prototype.start(objLink);
}
</script>

This should work.

LaSalle

Posted 9 years ago

Still not working.

This is how my code is placed in the index.html file:

Published at: www.webdudemedia.com/fox

——————HEAD———————
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Fox Test</title>
<script src=“Scripts/swfobject_modified.js” type=“text/javascript”></script>

<!— Lightbox Script —>

<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 GroupDelegate(id) { var objLink = document.getElementById(id); Lightbox.prototype.start(objLink);
}
</script>
<!— End Lightbox Script —>

</head>

——————-BODY————————-
<body>

<!— Added 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>

<!— End Invisible Links —>

<object id=“FlashID” classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=“1007” height=“659”> <param name=“movie” value=“Fox-Interface-2010-b.swf” /> <param name=“quality” value=“high” /> <!—<param name=“wmode” value=“opaque” />—> <param name=“wmode” value=“transparent” /> <param name=“swfversion” value=“9.0.45.0” />

<!— Lightbox Params —> <param name=“allowscriptaccess” value=“samedomain”> <param name=“wmode” value=“transparent”> <!— End Lightbox Params —> <!— This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. —> <param name=“expressinstall” value=“Scripts/expressInstall.swf” /> <!— Next object tag is for non-IE browsers. So hide it from IE using IECC. —> <!—[if !IE]>—> <object type=“application/x-shockwave-flash” data=“Fox-Interface-2010-b.swf” width=“1007” height=“659”> <!—<![endif]—> <param name=“quality” value=“high” /> <param name=“wmode” value=“transparent” /> <param name=“swfversion” value=“9.0.45.0” /> <param name=“expressinstall” value=“Scripts/expressInstall.swf” /> <!— The browser displays the following alternative content for users with Flash Player 6.0 and older. —> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href=“http://www.adobe.com/go/getflashplayer”><img src=“http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=“Get Adobe Flash player” width=“112” height=“33” /></a></p> </div> <!—[if !IE]>—> </object> <!—<![endif]—> </object> <script type=“text/javascript”> <!— swfobject.registerObject(“FlashID”); //—> </script> </body>

—————————-IMAGE.XML————————————

<slideshow> <photo image=“images/01.jpg” target=”_blank” url=“javascript:GroupDelegate(‘images/01.jpg’,‘img’,‘First Image’)”><![CDATA[]]></photo> <photo image=“images/02.jpg” target=”_blank” url=“javascript:GroupDelegate(‘images/02.jpg’,‘img’,‘First Image’)”><![CDATA[]]></photo> <photo image=“images/03.jpg” target=”_blank” url=“javascript:GroupDelegate(‘images/03.jpg’,‘img’,‘First Image’)”><![CDATA[]]></photo> <photo image=“images/04.jpg” target=”_blank” url=“javascript:GroupDelegate(‘images/04.jpg’,‘img’,‘First Image’)”><![CDATA[]]></photo> <photo image=“images/05.jpg” target=”_blank” url=“javascript:GroupDelegate(‘images/05.jpg’,‘img’,‘First Image’)”><![CDATA[]]></photo>
</slideshow>

————————————————

Need your help.

Thx.

FlashXML Support

Hi,

I checked your website and seems to me that everything works fine.
Except, that in your images.xml file you specified the wrong path at the first and the second image.

Erin

Posted 9 years ago

Hello,

I’m having problems with the shuffleImages attribute. I want the images to be shuffled, but when I click on the randomized images in the image scroller, the incorrect image pops up in the lightbox. I’m not sure if the pop up images are being randomized separately from the thumbs or not. Is there a way to fix this so that the shuffled images, when clicked, are the same image?

Thanks,
Erin

FlashXML Support

Hi,

Please re-download the archive, because we fixed that bug some time ago.

Adendum

Posted 9 years ago

Will this process work for ShadowBox?

FlashXML Support

Hi,

This is a small tutorial on how to install Shadowbox with our products.

After you install the Shadowbox using the tutorial from the shadowbox official site.
You need to specify in your images.xml file at the url attribute the following line:

url="javascript:GroupDelegate('images/01.jpg','img','First Image')"

Next you’ll need to write in your html file that embeds the swf the following block of javascript code in the head section (<head></head>)
<script type="text/javascript">
 function GroupDelegate(url,player,title)
 { 
 Shadowbox.init();
 Shadowbox.open({content: url, player: player, title:title});
 }
</script>

David

Posted 9 years ago

Hi,
Sorry, should have given that the first time. Here’s the link to my dev site.

http://www.ethicinc.com/blueprint3d/blueprint3d.html

Thanks for checking! My client loves the scroller by the way.

FlashXML Support

Hi,

It seems there’s a conflict between the lightbox .js and jquery-latest.js.

For example if you remove this line from your html:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

you’ll see that lightbox works.

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