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

kie

Posted 9 years ago

Can you please send me your private contact to my email please. There is no way to send messages through your site? I can’t send you a direct link for download through this forum.

FlashXML Support

Hi,

Please check your e-mail.

Kie

Posted 9 years ago

Was finally able to get this thing to show with no errors until I placed the lightbox function with this scroller so I know the flash works fine:

Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Load Never Completed.

went with 4-a in the directs, and 6 -1

Head:
<script type=“text/javascript” src=”/resource/flash/image_scroller_fx/swfobject.js”></script>
<script type=“text/javascript”> var flashvars = {}; flashvars.settingsXML = “/branding/settings.xml”; var params = {}; params.scale = “noscale”; params.salign = “tl”; params.wmode = “transparent”; params.allowscriptaccess = “samedomain”; var attributes = {}; swfobject.embedSWF(”/resource/flash/image_scroller_fx/scroller.swf”, “ScrollerDiv”, “430”, “190”, “9.0.0”, false, flashvars, params, attributes);
</script>
<link href=”/resource/styles/lightbox.css” rel=“stylesheet” type=“text/css” media=“screen” />
<script src=”/resource/scripts/prototype.js” type=“text/javascript”></script>
<script src=”/resource/scripts/scriptaculous.js?load=effects” type=“text/javascript”></script>
<script src=”/resource/scripts/lightbox.js” type=“text/javascript”></script>

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

body example:

<a id=“img1” title=“Like this design? Ask for layout ID: MO-01” rel=“lightbox[img]” href=”/resource/graphics/img-MO-01lg.jpg”></a> <a id=“img2” title=“Like this design? Ask for layout ID: MO-02” rel=“lightbox[img]” href=”/resource/graphics/img-MO-02lg.jpg”></a>

<!— Examples start here—> <div id=“ScrollerDiv”> Flash Here </div>

XML example:
<slideshow>
<photo image=”/branding/images/img-MO-01-thumb.gif” url=“javascript:GroupDelegate(‘img1’)” target=”_self” title=“Like this design? Ask for layout ID: MO-01”></photo>
</slideshow>

COuld you help? thx again for your time, been spending way too many hours on this…

FlashXML Support

Hi,

Send me a private message containing an arhive with your project.
I’ll check it out to see what is the problem.

Alvaro

Posted 9 years ago

All that glitters is not gold…
here are the tests
MAC Firefox 3 => works fine
MAC Safari 4 => works fine
MAC Chrome 4 => not working properly
MAC Opera 10 => not working properly

Windows Firefox 3 => not working properly
Windows IE 7 => doesn’t even load the link

I don’t know how to fix this, if it’s a problem of lightwindow or my server where I have my web (mobileme)

does anyone know why is not working properly in all the web browsers?

thanks,

Alvaro

FlashXML Support

Hi,
There would need to be made some adjustments for the component code and everything would work just fine in every browser.
If you are interested, just send me an e-mail with an archive containing your project.

Alvaro

Posted 9 years ago

Hi,
first of all thank you for your help, i became mad trying to use lightwindow from flash (xml controlled). I’m not a programmer nor a web designer, I just bought a template for my video portfolio, so if it doesn’t work for you guys I have no idea how this code can be modify. Anyway using the code from this site mixed with some from other sites it worked for me!
And here is how, hopefully it will help someone:

in html file I added this:
@
<!— this goes inside HEAD —>
<!— CSS —>
<link rel=“stylesheet” type=“text/css” href=“css/default.css” />
<link rel=“stylesheet” type=“text/css” href=“css/lightwindow.css” />
<!— JavaScript —>
<script type=“text/javascript” src=“javascript/prototype.js”></script>
<script type=“text/javascript” src=“javascript/effects.js”></script>
<script type=“text/javascript” src=“javascript/lightwindow.js”></script>

<script type=“text/javascript”>
var myLightWindow = new lightwindow();
function LightwindowDelegate(url,imgCaption)
{ myLightWindow.activateWindow({href:url,params:‘lightwindow_type=external,lightwindow_width=600,lightwindow_height=300’,caption:imgCaption});
}
</script>

<!— this goes inside BODY —>
params.wmode = “transparent”;
params.allowscriptaccess = “samedomain”;
@

then inside the xml the links look like this:

<![CDATA[<a href= "javascript:LightwindowDelegate('vid/h264.mov')">text show in web</a>]]>

hope it will help someone
happy new year!

Kurt

Posted 9 years ago

In implementing your 3D Carousel Menu FX I somehow got a dark gray background on the Carousel. I can not find a reason for this to have happened. Would you be kind enough to take a look and let me know what I might have don and how to get back to a transparrent background, With this background the titles and the directional arows ar not appearing, as they are both set to dark gray…. Here is my test page: http://www.stratusbusinesssolutions.com/templatesR.php

Thanks

FlashXML Support

I looked at your website and there seems to be no problems.
In other words I didn’t see any gray background.
The only gray background that appears is that when you click on a image and the the background of the entire browser’s window fades, in order to appear the clicked picture with lightbox. But after I close the picture everything comes to normal.
The carousel stills has a transparent background.

Try to clear the cache of your browser or try to open your website with a different browser. If the problem persists please send me a PM.

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