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

Jack

Posted 8 years ago

Im trying to use lightbox with my flash site, but I’m having a problem.
I did manage to get the right code in the right files, but now I’m kind of lost.

I have 4 thumbnail pictures on my flash site that i converted to buttons and i want them to show up in lightbox in larger size, but what ActionScript do i write? there guess it must contain some kind of listener along with a reference to the lightbox script go the lines of code added to my html file in step 4(a).
I guess its the 6th step i don’t fully understand, could you please explain it to me?

Thanks

FlashXML Support

Hi,

While we only provide support for Lightbox integration with our components, to call the Lightbox script from Flash (I am assuming that in your HTML file you have created the necessary script) you can add this IF statement in your buttons’ events

import flash.external.ExternalInterface;
// Calling a JavaScript function from AS3 (with optional parameters)
if (ExternalInterface.available) ExternalInterface.call("javascriptNameFunction", param1, param2);
// param1 or param2 can be object.id, object.name

Now you need to customize the parameters of the javascript. I for one recommend you use the Shadowbox script ( as it only requires 2 additional files and is easier to use).

StudioWeb

Posted 8 years ago

Hi,

I’ve just made an integration of jQuery Lightbox for the DockMenuFX.

The code:

<div id=“dockmenu”></div>

<script>
$(window).load(function(){

var flashvars = {}; var params = {}; var attributes = {}; flashvars.folderPath = “/swf/”; flashvars.settingsXML = “settings.xml”; flashvars.imagesXML = “images.xml”; params.scale = “noscale”; params.salign = “tl”; params.wmode = “transparent”; params.allowfullscreen = “true”; swfobject.embedSWF(“swf/DockMenuFX.swf”, “dockmenu”, “100%”, “100%”, “9.0.0”, false, flashvars, params, attributes); $(’.lightboximg’).lightBox({ overlayBgColor: ‘#000000’, containerResizeSpeed: 0, imageLoading: ‘/img//lightbox-ico-loading.gif’, imageBtnClose: ‘/img/lightbox-btn-close.gif’, imageBtnPrev: ‘/img/lightbox-btn-prev.gif’, imageBtnNext: ‘/img/lightbox-btn-next.gif’ });
});

function LaunchLB(id) { var objLink = document.getElementById(id); $(objLink).click();
}
</script>

<div style=“display:none”>
<a class=“lightboximg” id=“img21” href=”/img/gal/10/573878.sized.jpg”></a>
<a class=“lightboximg” id=“img22” href=”/img/gal/10/575175.sized.jpg”></a>
<a class=“lightboximg” id=“img23” href=”/img/gal/10/575180.sized.jpg”></a>
<a class=“lightboximg” id=“img24” href=”/img/gal/10/575184.sized.jpg”></a>
</div>

In the images.xml

<dockmenu>
<photo image=”../img/gal/10/573878.thumb.jpg” url=“javascript:LaunchLB(‘img21’)” target=”_self”/>
<photo image=”../img/gal/10/575175.thumb.jpg” url=“javascript:LaunchLB(‘img22’)” target=”_self”/>
<photo image=”../img/gal/10/575180.thumb.jpg” url=“javascript:LaunchLB(‘img23’)” target=”_self”/>
<photo image=”../img/gal/10/575184.thumb.jpg” url=“javascript:LaunchLB(‘img24’)” target=”_self”/>
</dockmenu>

Enjoy it…. :)

FlashXML Support

Hi,

Thank you for you contribution to the knowledge base.

jquery lightbox

Posted 8 years ago

Hi, I’m trying to use lightbox++ but there are an incompatibility with jquery and prototype. There are a lightbox++ compatible with jquery. I need jquery in my site due other uses.

Thanks

FlashXML Support

Hi,

Lightbox++ was not developed by us, we only use it in some of our products. For any incompatibility issues you should contact the Lightbox++ developers.

Dan

Posted 8 years ago

Whatever can be a swf or pageflip in lightbox. It’s possible?

FlashXML Support

Hi,

Lightbox doesn’t support this feature, however Colorbox does. You can try our colorbox script on a localhost/on your site and make sure you are using a syntax like this for the images.xml:

<photo image="images/103.jpg" colorboxImage="whatever_animation_file.swf" target="_blank" colorboxInfo="Item 03" colorboxClass="video" url=""></photo>

Dan

Posted 8 years ago

Hi evebdody i would like to know how can i put a swf pageflip inside lightbox?

FlashXML Support

Hi,

Please be more explicit. Do you want to add the lightbox functionality to page flip component or to open the page flip’s SWF file in a lightbox pop-up window, because I don't think it is possible any of the two.

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