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

David

Posted 9 years ago

Hello,
After hours of struggling, I have finally integrated the commercial scroller, lightbox and the other little jquery functions on my site. The imagescroll shows up where I want it and behaves the way it is supposed to.

The only problem I have left is when I click on the thumbnail to show it large in lightbox I get an error “element.style is undefined” line 101 of lightbox .js I know that’s not your script, but do you have any ideas why that is happening?

Thanks!

FlashXML Support

Hi,

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

Caitlin

Posted 9 years ago

Hi! I am using your image carousel (commercial license) the Lightbox script and getting great results, but I would also like to be able to load Quicktime movies and iFramed content. I saw the instructions you posted earlier for implementing LightWindow, but for some reason the LightWindow website is unavailable and I can’t find any alternative sites to download the script from. Can you help me incorporate another lightbox-esque script for this purpose? I am really loving PrettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/), but I have no idea how to get it to open from a thumbnail in my Flash carousel. Thanks!

FlashXML Support

Hi,

After you copy the js, css and images folder from the prettyPhoto archive in your project folder.
Open the index.html file and write the following lines in the <head></head> section.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
 <script type="text/javascript" charset="utf-8">
 google.load("jquery", "1.3");
 </script>
 <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
 <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 function GroupDelegate(url, title)
 {
 $.prettyPhoto.open(url,title,description);
 } 
 </script>

Next write this line before closing the body tag (</body>).

<script type="text/javascript" charset="utf-8">
 $(document).ready(function(){
 $("a[rel^='prettyPhoto']").prettyPhoto();
 });
</script>

In your images.xml file at the url attribute you’ll need to specify something like this.

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

lenz

Posted 9 years ago

wmode ="transparent"

I put the parameter inside both <object> and <embed sr>
and IE still shows the flash movie on top of lightbox.

The site i’m working on is www.nyckitesurf.com
Is it possible for you to take a loot at it.
I can send you the files if it helps.

Would really appreciate it =)

FlashXML Support

Hi,

Send an email to support at flashxml.net. I’ll try to help you.

Lenz

Posted 9 years ago

Body code:

<div align="center">
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="766" height="900" id="main_v8" align="middle" allowScriptAccess="sameDomain" wmode="transparent">
    <param name="allowScriptAccess" value="sameDomain" />
    <param name="movie" value="main_v8.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="main_v8.swf" quality="high" bgcolor="#ffffff" width="766" height="900" name="main_v8" align="middle" allowScriptAccess="sameDomain" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
  </object>
</div>

Example of the xml link code:

<image imageUrl="_pic1_2.jpg" link="javascript:GroupDelegate('img1')"/>

Flash button code:

onClipEvent (load) {
 imageNumber=1;
 
 imageProperties=_root.getCurrentImageName(imageNumber);
 loadMovie(_root.url imageProperties['name'], this.cont.cont1);
 url=imageProperties['linkToOpen'];
}

I saw you advice to Ryan on how to fix his IE problem
Does it also apply to grouped photos from Step A?

How would i apply this to grouped photos?

ExternalInterface.call(LightboxDelegate, url);

Not too sure where i would need to enter the ExternalInterface function

sorry for the long list.

FlashXML Support

Hi,

You’ll need to set the wmode to transparent.

<param name="wmode" value="transparent" />

Lenz

Posted 9 years ago

Hi,
Props for Lightbox . an amazing and easy to use tool.
I installed it on my fllash site. I’m having the xml file link to the invisible links on the body of the html page.
I’m using <object></object> tags to embed the flash.
After putting in:
<param name=“allowscriptaccess” value=“samedomain”>
<param name=“wmode” value=“transparent”>
It started working fine on firefox for both windows and pc.
my only issue now is IE. It still forces lightbox pictures behind the swf file.
I’m at a loss.
Is there any way you can link me a solution.
would be greatly appreciated
Thanx =)
~lenz

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