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 tryed using fancybox and suggested way, http://indianwala.0fees.net/fancybox/ when hosting the demo, the js files are not pointing, so i make changes to script path removing (./) like this. “./fancybox” to “fancybox”
the problem is when i click the button inside the flash it responding showing loading but nothing is appearing. this is the code i change in flash AS2
hotspot1.onPress = function() { getURL(“javascript:LaunchFancybox(‘http://www.google.com’)”); //getURL(“javascript:LightboxDelegate(‘www.google.com’,‘web page loaded’)”);
}
please suggest i want to display text content a HTML page, there is no xml driven. im poor in ActionScripting.

FlashXML Support

Hi,

Could you send me an archive with your project to support at flashxml.net.
I’ll check it out.

Thank you.

vinod

Posted 9 years ago

thanks and appreciate your response.
from flash:
hotspot1.onPress = function() { getURL(“javascript:LightboxDelegate(‘www.google.com’,‘web page loaded’)”);
}

hotspot2.onPress = function(){ getURL(“javascript:LightboxDelegate(‘images/image-1.jpg’,‘Image Loaded’)”);
}
image loading is working not flash
can’t i use the same functionalty what i am approching for, along with image iwant to show some content. simiar to this link, this link doesn’t have to fire the event from flash.
http://particletree.com/examples/lightbox/

vinod

Posted 9 years ago

Hi,
I am looking for similar thing but not for image for HTML page load.
http://blog.codefidelity.com/?p=16 following this link i find the way to get the output with requirement needs. Now im want to change the image place to load html page using frame or other way work a round. please help me.

FlashXML Support

Hi,

You could try fancybox.

First download and setup fancybox using their tutorial.
Next in your images.xml file at the link attribute try to specify something like this:

url = "javascript:LaunchFancybox('http://flashxml.net')"

Also in your html file that embeds the SWF try to write the following piece of javascript code in the section:

<script type="text/javascript">
    function LaunchFancybox(url)
    {
 $.fancybox({href:url, typr:'iframe'});
    }
</script>

Mike

Posted 9 years ago

Hi,
I could not get lightbox to launch from my flash movie so I switched over to html, but kept the flash intro. My client wants this done asap and going the html route is the quickest solution at this point as I’ve been wrestling with this for almost 2 weeks.

I have followed the tutorial exactly from here and other sources (codefidelity and dynamic drive) but it just isn’t working. As I mentioned in an earlier post, in my flash movie I use thumbnail images as buttons to call lightbox. These buttons are nested within 4 child movie clips (sprites) so I’m wondering if that nesting is what’s causing the issue.

Any info you can provide would be much appreciated.

FlashXML Support

Hi,

Could you send me to support at flashxml.net an archive containing your SWF file + assets.
I’ll try to help you.

Thank you.

Mike

Posted 9 years ago

Hi,
me again. I should mention that in IE8 I get this error: “‘undefined’ is null or is not an object.”

This refers to effects.js, line 544, char 3

When I look at effects.js I don’t see anything there that makes sense.

Thanks,
-Mike

FlashXML Support

Hi,

I checked your website on FF, IE and Chrome and I didn’t saw any issue. Are you still having problems with this?

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