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

Reece Davies

Posted 7 years ago

Hi

I have integrated Lightbox into my website, but for some reason I cannot get it to work. When I first implemented it, Lightbox functioned properly, but since I cannot get it to work again. I am convinced I have added the correct lines of code, and I have redownloaded Lightbox++ in case the files had gotten corrupt during FTP, but still no luck.

Any help appreciated.

FlashXML Support

Hi,

I see that you are using jQuery on your website. Unfortunately jQuery is in conflict with the libraries used by lightbox and it will not work. You can try to use the jQuery in no conflict mode, this article might be useful, or you can try to use another Java Script integration like shadowbox.

Andrew Sy

Posted 7 years ago

Hi,

I am doing a website for my friends father in law and followed the instructions above but the lightbox is not working.

I followed it to the teeth and event integrated the xml of the old carousel file they gave me.

HELP!

Thanks!
Drew

FlashXML Support

Hi,

Unfortunately lightbox doesn’t work with the latest versions of WP because is in conflict with jQuery, as you can see in this forum. You could try to use jquery in no conflict mode as Alexey said there or you could try another java script integration like shadowbox.

joe gronda

Posted 7 years ago

I am trying to make a video player in flash AS3 that is dynamically loaded by an XML file the player needs to have two rows of three thumbnails that are also loaded by the XML file. When the thumb is clicked the video should play in a larger popup with a light box effect.

Please help I have been banging my head on this for nearly two months now.

Below is the AS3 that I have so far below the AS3 code is also the XML code.

Thank you in advance,

Joe

////////////////////// START AS3 CODE /////////////////////////

import fl.video.*;
/////////
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
//////////////
var columns:Number;
var thumb_width:Number;
var thumb_height:Number;
var thumbs_x:Number;
var thumbs_y:Number;
var video_x:Number;
var video_y:Number;
///
var x_counter:Number = 0;
var y_counter:Number = 0;
var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var my_tweens:Array = [];
var container_mc_tween:Tween;
var full_tween:Tween;
///
var my_videos:XMLList;
var my_total:Number;

var main_container:Sprite;
var thumbs:Sprite;
var titles:Sprite;
var my_player:FLVPlayback;

var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load (new URLRequest(“playlist.xml”));
myXMLLoader.addEventListener (Event.COMPLETE, processXML);

function processXML (e:Event):void { var myXML:XML = new XML; columns = myXML.@COLUMNS;

thumb_width = myXML.@THUMB_WIDTH; thumb_height = myXML.@THUMB_HEIGHT; thumbs_x = myXML.@THUMBS_X; thumbs_y = myXML.@THUMBS_Y; video_x = myXML.@VIDEO_X; video_y = myXML.@VIDEO_Y; my_videos = myXML.VIDEO; my_total = my_videos.length();

makeContainers (); callThumbs (); makePlayer ();
}

function makeContainers ():void { main_container = new Sprite(); addChild (main_container);

thumbs = new Sprite(); thumbs.addEventListener (MouseEvent.CLICK, playVideo); thumbs.addEventListener (MouseEvent.MOUSE_OVER, onOver); thumbs.addEventListener (MouseEvent.MOUSE_OUT, onOut); thumbs.x = thumbs_x; thumbs.y = thumbs_y; thumbs.buttonMode = true; main_container.addChild (thumbs);

titles = new Sprite(); titles.x = thumbs_x; titles.y = thumbs_y; main_container.addChild (titles);
}
///////////////////////////////////////////

///
function callThumbs():void { for (var i:Number = 0; i < my_total; i++) {

var thumb_url = my_videos[i].@THUMB;

var thumb_loader = new Loader(); thumb_loader.load(new URLRequest(thumb_url)); thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);

thumb_loader.name = i;

thumb_loader.x = (thumb_width+150)*x_counter; thumb_loader.y = (thumb_height+150)*y_counter;

if (x_counter+1 < columns) { x_counter++; } else { x_counter = 0; y_counter++; } var preloader_pb:ProgressBar = new ProgressBar(); preloader_pb.source = thumb_loader.contentLoaderInfo; preloader_pb.x = thumb_loader.x; preloader_pb.y = thumb_loader.y; preloader_pb.width = thumb_width; preloader_pb.height = thumb_height; preloaders_mc.addChild(preloader_pb);

preloader_pb.addEventListener(Event.COMPLETE, donePb); }
}

///
function thumbLoaded(e:Event):void { var my_thumb:Loader = Loader(e.target.loader); container_mc.addChild(my_thumb); my_tweens[Number(my_thumb.name)]=new Tween(my_thumb, “alpha”, Strong.easeIn, 0,1,0.5, true);

my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);
}
///

/*function tweenFinished(e:TweenEvent):void { var my_loader:Loader = Loader (e.target.obj); my_loader.unload(); full_mc.removeChild(my_loader);// This line was removeChid(my_loader), just add full_mc before it. removeChild(full_mc); full_mc = null;

container_mc.addEventListener(MouseEvent.CLICK, callFull); container_mc.buttonMode = true; container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver); container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);

var my_tween:Tween = Tween(e.target); my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
}*/
/////////////////////////////////////////////

/*function callThumbs ():void { for (var i:Number = 0; i < my_total; i++) {

var thumb_url = my_videos[i].@THUMB; var thumb_loader = new Loader(); thumb_loader.name = i; thumb_loader.load (new URLRequest(thumb_url)); thumb_loader.contentLoaderInfo.addEventListener (Event.COMPLETE, thumbLoaded); thumb_loader.x = (thumb_width+145)*i;

var thumb_title = my_videos[i].@TITLE; var title_txt:TextField = new TextField(); title_txt.text = thumb_title; title_txt.y = thumb_loader.y; title_txt.x = thumb_width + 80; title_txt.width = thumb_width; title_txt.height = thumb_height; title_txt.wordWrap = true; titles.addChild (title_txt);

}
}

function thumbLoaded (e:Event):void { var my_thumb:Loader = Loader(e.target.loader); thumbs.addChild (my_thumb);
}*/

function makePlayer ():void { my_player = new FLVPlayback(); //my_player.pause(); // pauses play first time issued //my_player.pause(); // resumes play //my_player.pause(false); // no effect, play continues //my_player.pause(); // pauses play my_player.skin =“SkinOverPlaySeekMute.swf”; my_player.skinBackgroundColor = 0xAEBEFB; my_player.skinBackgroundAlpha = 0.5; my_player.x = video_x; my_player.y = video_y; my_player.width = 480; my_player.height = 270;

main_container.addChild (my_player); my_player.source = my_videos0.@URL;
}

function playVideo (e:MouseEvent):void { var video_url = my_videos[e.target.name].@URL; my_player.source = video_url;
}
///
function donePb(e:Event):void { var my_pb:ProgressBar = ProgressBar(e.target); preloaders_mc.removeChild(my_pb); my_pb.removeEventListener(Event.COMPLETE, donePb);
}
///

function onOver (e:MouseEvent):void { var my_thumb:Loader = Loader(e.target); my_thumb.alpha = 0.5;
}
function onOut (e:MouseEvent):void { var my_thumb:Loader = Loader (e.target); my_thumb.alpha = 1;
}

////////////////////// END AS3 CODE /////////////////////////

////////////////////// START XML CODE /////////////////////////

<?xml version=“1.0” encoding=“UTF-8”?>
<PLAYLIST COLUMNS=“3” THUMBS_X=“10” THUMBS_Y=“10” THUMB_WIDTH=“100” THUMB_HEIGHT=“67” VIDEO_X=“140” VIDEO_Y=“300” color=”#FFFFFF”>
<VIDEO TITLE=“Assains Creed” THUMB=“thumbs/thumb1.jpg” URL=“video/video1.flv”/>
<VIDEO TITLE=“Batman Arkam City” THUMB=“thumbs/thumb2.jpg” URL=“video/video2.flv”/>
<VIDEO TITLE=“Battlefield 3” THUMB=“thumbs/thumb3.jpg” URL=“video/video3.flv”/>
<VIDEO TITLE=“Call of Duty” THUMB=“thumbs/thumb4.jpg” URL=“video/video4.flv”/>
<VIDEO TITLE=“Elders Scroll V “ THUMB=“thumbs/thumb5.jpg” URL=“video/video5.flv”/>
<VIDEO TITLE=“Saints Row 3” THUMB=“thumbs/thumb6.jpg” URL=“video/video6.flv”/>
</PLAYLIST>

////////////////////// END XML CODE /////////////////////////

FlashXML Support

Hi,

I’m sorry but we can only offer support for our products. Lightbox it’s not created by us, we just used it is some of our products.

Muhammad

Posted 7 years ago

Hi
i have that lightbox and it work good on Linux host but not work at all on windows host
is there any thing i miss
thank you

FlashXML Support

Hi,

Normally, if one of our products that has lightbox integrated, work properly on a Linux host, it should work properly on a Windows host as well. Please send us the link to your website and we will check it out.

DANIELE

Posted 8 years ago

HOW TO CRATE AN IMMAGE SET?

FlashXML Support

Hi,

Please follow the instructions above. If you are encountering problems, send us the link to your website and we will check it out.
Note that this tutorial is just about how to integrate lightbox with our Flash components.

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