flashLightBoxInjector – Start Lightbox from Flash
Overview
- What is
flashLightBoxInjector? - Alternative (non-Flash) implementations of
flashLightBoxInjector - Demos
- Download
- Version History
- License & Usage
- Installation/Configuration
- Static Code Example
- Dynamic Code Example (Step-by-step example)
- Dynamic Code Example (All-in-one example)
- Feedback/Help/Support
- Make a donation
What is flashLightBoxInjector?
flashLightBoxInjector is a PrototypeJS class that bridges the gap between Flash and Lightbox2. Not only does flashLightBoxInjector let you start an already existing Lightbox driven gallery (viz. static HTML), it also lets you dynamically build a list of images to show through Lightbox (viz. inject the needed HTML from within Flash).

Imagine a Flash movie loading a set of images from Flickr, showing all thumbnails. A click on the thumbnail will then fire up Lightbox to show that image (within its set). This is where flashLightBoxInjector jumps in: after having loaded the images into your Flash file it automagically injects the needed HTML code into the current HTML document and then lets Lightbox know that this new set of images was included, enabling Lightbox to show them. And all this with the ease of a few calls made through Flash's proprietary ExternalInterface object. (See demo)
Looking for a version that works with ShadowBox instead of Lightbox? Head over to the PictureFlow project page and download the latest version in order to lay hands on flashShadowboxInjector.
Alternative (non-Flash) implementations of flashLightBoxInjector
The great thing about flashLightBoxInjector is that its usage is not limited to Flash only, as the JavaScript can be called from anywhere you like

Imagine a website where you have a dropdown to select an image from and after a click on a button, Lightbox2 shows the selected image. Yes, flashLightBoxInjector can be used for this purpose. (See demo2)
Demos
Download
The download of flashLightBoxInjector includes a full example, including Flash Sources.
In order for this to work with Lightbox 2.0.4 (released 2008.03.09), you'll need to make 1 tiny change to the lightbox.js file! Versions 2.0.x predating 2.0.4 will work “out of the box”
Latest Version
Old, Archived Versions
NOTE: it is advised that you use the latest version!
Don't forget to read the License & usage and Installation/Configuration blocks on this page!
Version History
Version 1.2 - 2007.11.22
- [add] Added a
prependElementfunction - [add] Added a new, more impressive, example (Flash Polaroid Photo Gallery)
Version 1.1 - 2007.08.03
- [fix] Array passed into flashLightBoxInjector appeared reversed in Lightbox2
Version 1.0 - 2007.07.27 - * INITIAL RELEASE *
- Small coding of class, flash example, documentation, etc. resulting in a first release.
License & usage
The script is released under a creative commons Attribution-ShareAlike 2.5 license. Should you use the script within a commercial context please think about clicking the PayPal donate button.
Installation/Configuration
In order for this to work with Lightbox 2.0.4 (released 2008.03.09), you'll need to make 1 tiny change to the lightbox.js file! Versions 2.0.x predating 2.0.4 will work “out of the box”
- Make sure you've set up Lightbox2 correctly.
- Include
flashLightBoxInjector.jsin your HTMLheadsection, underneath the Lightbox2 references:
- That's it, you're done!
Static Code Example
If you already have a set of links in your HTML, only a minor change is needed: each element must be given an id.
From within Flash then call myFlashLightBoxInjector.start through ExternalInterface along with the id of the linked picture as parameter. If you'd want to show the second picture, then you'd be using this piece of code:
-
import flash.external.*;
-
-
btnShowImage.onRelease = function() {
-
ExternalInterface.call("myFlashLightBoxInjector.start", "roadTripImage2");
-
}
Dynamic Code Example (Step-by-step example)
Imagine that you've pulled an XML file from Flickr containing a set of pictures and that you've loaded all thumbnails into Flash. flashLightBoxInjector provides you the option to automatically generate the needed HTML, so that Lightbox has knowledge of that gallery. Here's what you have to do:
Before going through the steps needed, it's needed for you to know that flashLightBoxInjector automatically creates a div-element with the id flashLightBoxInjectionBox where it will store the HTML needed for Lightbox.
If you have a robust knowledge of coding Flash/Javascript, then you might want to skip this example, and immediately go to the All-in-one example
First you have to import flash.external.* in your Flash file, enabling javascript calls from within flash, the proper way
-
import flash.external.*;
(yes, we could use getUrl("javascript:...") to call javascript functions, but that cannot be trusted 100%)
- First call a
myFlashLightBoxInjector.reset()from within Flash, this will clear the contents offlashLightBoxInjectionBoxif you don't want previously injected elements to appear in the same set (when using the same set ID):
Actionscript:
-
ExternalInterface.call("myFlashLightBoxInjector.reset");
-
-
While looping through your set of images within Flash (and placing a thumbnail version of the image onto the Stage for example), call a
myFlashLightBoxInjector.appendElementfor each image:Actionscript:
-
ExternalInterface.call("myFlashLightBoxInjector.appendElement", linkToTheImage + "", titleOfTheImage + "", uniqueIdOfTheImage + "", nameOfTheSet + "");
Note that I'm appending an empty string to each parameter (viz. implicit casting to String), as Flash otherwise tends to freeze due to some weird reason.
Don't forget to hook an
onReleaseevent to the thumbnail you've placed onto the Stage, which will call themyFlashLightBoxInjector.startfunctionActionscript:
-
ExternalInterface.call("myFlashLightBoxInjector.start", uniqueIdOfTheImage + "");
-
- After you have looped throuh all of your images, call a
myFlashLightBoxInjector.updateImageList, so that Lightbox will know of the newly injected set
Actionscript:
-
ExternalInterface.call("myFlashLightBoxInjector.updateImageList");
-
That's it, you're done!
If you notice that your images appear in the reverse order in Lightbox than the order you've inserted them in your Flash File, then use prependElement instead of appendElement in the code above (Requires fLBI 1.2)
Dynamic Code Example (All-in-one example)
A full piece of code might look like this (full workout in example included in the download)
-
function attachImagesToStage(photoArray:Array):Void {
-
-
// reset myFlashLightBoxInjector
-
ExternalInterface.call("myFlashLightBoxInjector.reset");
-
-
// loop photoArray
-
for (i=0; i <photoArray.length; i++) {
-
-
// attach new MC to Stage
-
var mc:MovieClip = this.attachMovie("photoFrame", "photoFrame" + photoArray[i].id, _root.getNextHighestDepth());
-
-
// add image to MC, set x and y coordinates, etc.
-
mc.loadImage(photoArray[i].thumb);
-
mc._x = ((mc._width * (i+1)) - (mc._width / 2));
-
mc._y = 25 + Math.round((Stage.height - (mc._height*2)) * Math.random());
-
mc._rotation = 30 - (60 * Math.random());
-
-
// append element in DOM through myFlashLightBoxInjector.appendElement
-
ExternalInterface.call("myFlashLightBoxInjector.appendElement", photoArray[i].url + "", photoArray[i].desc + "", "photoFrame" + photoArray[i].id + "", "mySetOfImages");
-
-
// hook onRelease event
-
mc.onRelease = function() {
-
// show Lightbox with this image
-
ExternalInterface.call("myFlashLightBoxInjector.start", this._name + "");
-
}
-
-
}
-
-
// let Lightbox know stuff has changed
-
ExternalInterface.call("myFlashLightBoxInjector.updateImageList");
-
-
}
Now build an array of the images you wish the load, each entry having an id, url and desc property and pass that array through the function.
-
attachImagesToStage(myArray);
Feedback/Help/Support
One can always leave a comment in case any questions should arise or if a bug were to be found; and one can always support me by donating me a tidbit to my paypal
Make a donation
It certainly is no obligation but it would most certainly put a smile on my face
Alternatively you can support me by clicking one of the ads below.
Advertisements
About this Page

Best of Bram.us
Start getting used to scratching and smudging the iPhone with this Flash based iPhone Simulator
Automatically wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.
Pimp Your Firefox to be a web all-star
A look at the inc.common.php, spreading handy functions.
Photoshop Script inspired in the Chlomoscript to unobtrusively pimp photos you have taken.
Methods to adding file management options to TinyMCE (Part 1), Extending TinyFCK (Part 2) and PHP file uploads overview (Spinoff 1).









Comments
bramus,
Please check out this link if you have time I pasted your code in as well and created a form, but its still not working any ideas?
@ Nick : you have the wrong lightbox version! Version 2.03.3 is required, as that version holds a
updateImageListfunction which is used by flashLightBoxInjector.bramus thank you for you help. I appreciate getting back to me I need to take a holiday as well. Anyway I’ll try updating to the new version this weekend. I’ll also be sure to send a donation to you once this is done your gonna save me alot of time
Bramus sorry to bother you I got it working and it works great. I was using my macbook, but today I got a call saying the formatting was wrong. So i brought it up on my windows machine and noticed in IE it all messed up are you aware of any bugs? If you see anything you can email me or respond on this Thanks
NICK
Nevermind I figured it out Thanks anyway
hi,
like to know if i can implement the inyector into a flash scroller which has several linkings driven by a external xml document.
thanxs & best
eduardo
Great script!
Just want to point out a “typo” in your ‘Static code example’. It’s almost nothing but I had some trouble with this for like half an hour before I realised what the problem was.
If you copy/paste the HTML code the id’s says “roadtripImage2″ but in the AS code it says “roadTripImage2″, and that capital ‘T’ just messed it up for me.
Now you know
Thx for a great script
René
hi,
im really looking forward to getting this running from my flash files.
im launching a .swf as full page with SwfObject. i dont have the links to the images embedded into the HTML, can i still use flashlightboxinjector?
Hi Liam, you sure can do that. FlashLightBoxInjector will automatically insert the needed (hidden) div element when loaded.
Then follow the instructions to insert the images from within flash (through FlashLightBoxInjector) into the HTML, hook the events within your Flash file (viz. the buttons/objects which will start the Lightbox) and everything will work as it should
On a sidenote: I’ve done this myself over at http://www.trancefusion.be, for which I have created FlashLightboxInjector
can someone help please?
my test page
i’m using the exact code from the “Static Page Example”.
the button in the swf file has the instance name of btnShowImage and the actionscript is as below
import flash.external.*;
btnShowImage.onRelease = function() {
ExternalInterface.call(“myFlashLightBoxInjector.start”,”roadTripImage2″);
};
i have a folder called images in the same directory containing
image-1.jpg
image-2.jpg
image-3.jpg
if i click on the links in the page, it works but if i click the flash button, i dont get the gallery. how come?
also i dont want the links on the page, so instead of the identifier can i but in the url of the image instead?
i am a total javascript novice. sorry
@ liam: you’re calling “roadTripImage2″ from within your flash, yet your id’s on the a elements are “roadtripImageX” (notice the lowercase T) … either change one of the two and you’re set
thanks for the lightning fast reply!
one small query though, why does my swf file disappear when the gallery launches? is it because im not using SwfObject?
felt i had to reply to the “What’s the deal with Scrubs?” entry below, hopefully you agree with me??
..p.s.
how do i hide the links? i dont want them showing on the page?
@ liam:
- your swf is hidden as Lightbox does this automatically. To not hide it, comment out lines #376 (which reads
hideFlash();) & #624 (which readsshowFlash();) fromLightbox.jsby placing // in front of the lines.- Didn’t get that comment on the scrubs thread :-S
- Looks like you’ve sorted out the hiding (for those not knowing: place them in a
divwithdisplay:none;applied to it)Gotcha!
Aaaahh now i can go to sleep!! its 2.30am here in Ireland. (i dont know where you are)
thanks for all your help. il be getting a Credit card very soon, il make a donation!
It’s 3.30 here in Belgium now
Tia for the donation
Bramus, outstanding job on http://www.trancefusion.be
Did you especially customise the polaroid sorting effex by yourself or is it built into flashinjector ?
Do you have some sample code on how you got flashinjector to work for downloads in your http://www.trancefusion.be download section ?
Thanks for the great mod and look forward to hearing a lot from me.
(wmode = transparent) + (text inputs) = living nightmare
OMFG! is there anyway round this? in my text fields, @ becomes “.
surely, someone at Mozilla or adobe has heard about this?
this fixes it..
keyPresser = new Object();
keyPresser.onChanged = function(intxt:TextField) {
if (34 == ((Key.getAscii())) || 64 == ((Key.getAscii()))) {
intxt.text = intxt.text.slice(0,intxt.text.length-1) +”@”;
}
};
Key.addListener(keyListener);
input_txt.addListener(keyPresser);
stop();
@ Roland: the polaroid sorting effect has nothing to do with
flashLightBoxInjector. As in the included exmaple it’s an XML (from Flickr) that is read in, then looped through and an array is built. The only difference between Trancefusion.be and the code-example provided is that photoArray is randomized before being passed toattachImagesToStage@ Roland bis : the downloads are normal getURL() calls, has nothing to do with
flashLightBoxInjector@ Liam : encountered the same problem whilst developing trancefusion.be …
Bramus, the example code in your download provides non-polaroid effect, non draggable, ie:fixed images.
I’m not able to see in operation the kind of functionality that appears on trancefusion.be. What am I missing ?
Are you using webuppers Polaroid Gallery on trancefusion ? http://www.no3dfx.com/polaroid/
@ Roland: I thought you meant the randomizing … anywho, yes, it’s a modded (read:
flashLightBoxInjectorintegrated) version of the link you’ve postedAre you willing to share the code to that ? I’m willing to donate
Hi Roland, will knock up an example any time next week (going on a little holiday within a few hours and won’t be back till next week)
Hi Bramus, any luck with that code example ?
Hi Roland, haven’t started on it yet as I’m quite busy with 3RDS-related jobs atm … sorry about that. But no worries, the example will be created
ok, bramus – anxiously waiting…
Any luck yet with this Bramus ?
@Roland: check the download link … new version with new example
I am testing this on a Mac and running Safari 3.0.4 displays the Lightbox as if it is going to come up (only the transparent background appears) but nothing ever comes up. I run it in Firefox and it works just fine. Any ideas on this one. Is it using a tag that Safari doesn’t like in the javascript? Any help would be greatly appreciated!
Thanks for the update.
The fla files included in the v1.2 source seem corrupted as Flash 8 gives me the error ‘unrecognised file format.’
I suspect zip corruption.
Can you please recheck & repost ?
having the same problem as Chas…
I took the first example, commented out the flickr XML and loaded my own image array. The thumbs show up fine, the background dims, and nothing ever comes up. I JUST tested it using the original example (which is fine), but every time I load my own images in the SWF the damn thing freaks out!
I am literally yelling at my computer because I can’t get this thing to work… HELP!
It appears that when I load the RSS feed from flickr it functions perfectly… yet even when I download that VERY SAME FEED from flickr and put it on my server as an XML file the injector stops functioning. Any ideas/insight with this one?
@ Chas, Adam: will take a look into that … must say that over at Trancefusion.be the images of 2007 (which are over 200 images, yet only 15 are shown) aren’t loaded from an XML but inserted by a loop (alle images are named image-X.jpg, where X ranges from 1 up to 200).
@ Adam bis: sure the headers are ok (UTF-8 it should be)?
@ Roland: Flash CS3 is required. Will post a Flash 8 version of the .fla
@ Roland : redownload flashLightBoxInjector 1.2, the Flash 8 compatible versions are included now
Is there a way to use this with an already existing external xml file? instead of creating one and importing everything into an array? I have a flash thumbnail scroller that I want to open the images in lightbox, but everything I’ve tried has failed when it tries to access the external xml file to retrieve the images. Any thoughts? Thanks
THANK YOU SO MUCH! THIS IS EXACTLY WHAT I WAS LOOKING FOR! WHAT A RELIEF! I JUST DID A LITTLE DANCE AROUND MY OFFICE!
wow, I’m a total nerd….
Thanks for your powerful “injector” !
I apply it on my “PictureFlow” project . In fact, a flash CoverFlow (By coincidence, I saw tonight, 3RDS developed one too on De Leeslijst website)
@Brandon: yes, that’s perfectly possible. In the examples provided, it reads in an already existing external xml (from Flickr in this case) and then builds an array of it.
@Jacob: Glad to have helped
@osamwal: very nice work! Kudos!
Thank you for this awesome effect for flash!!
Now, my problem is that i’ve downloaded the latest version, and I have serious problems to use it with static code and images at the same folder.
Could you help me please?
Which code should I use?
Thank U very much!
Good stuff!
but it doesn’t works on Opera 9.24
Hi Bramus, is it possible to insert flashinjector into another existing flash movie ?
So the polaroid effect would appear in a panel within another flash movie.
Appreciate any help on this.
@ Kriz : didn’t test in Opera. Think it has to do with the implementation on how Flash is loaded into Opera. Will check it out.
@ Roland: that not possible, as Lightbox is HTML+CSS+JS and Flash is … well … Flash. The thing you’re looking for is a flash version of Lightbox; don’t know if that exists (although a clever search on Google will tell you quickly).
Hi,
I wanted to ask, if it’s possible to use lytebox (http://www.dolem.com/lytebox/) with the injector instead of lightbox2…I need lytebox because I work with iFrames and lightbox doesn’t support them…I tried already some things but it didn’t work…I would like to use lytebox in combination with pictureflow 2.4 (http://www.yaelle.com/?p=61) which is already working with lightbox2, so it shouln’t be such a problem because pictureflow 2.4 works already with your injector…
but I’m not getting it and so I ask you =), what do I have to do to make this work…finally it should work with my site: http://fred.lee.john.031.be/booking.html –> under “Jamathetics” –> “Pressefotos” … the gallery is already there, but the pictures shouldn’t open in the iFrame, they sould open over the whole page (the nice thing of light/lytebox =D)…
thank you for your work with the injector, for your time and maybe your help =)!
greez,
LuK
if (mc._name.indexOf("reflection") == -1) {mc.onPress = function():Void {
if ((getTimer()-this.pressTime<=doubleClickRegister && this.pressTime) || !doubleClickURL) {
if (infostruc[this.cid].urlToGet) {
getURL(infostruc[this.cid].urlToGet, "_"+infostruc[this.cid].urlAction);
}
}
this.pressTime = getTimer();
current = this.cid+1;
updateInfo();
};
Currently I have that setup to link to an outside link, when clicking on an image, but I would like it to load the large image in light box.
you can use any of these variables:
auth, album, httpType, urlToGet, urlAction
Can anyone help me add this into my flash app?
I tried doing: but no go.
if (mc._name.indexOf("reflection") == -1) {
ExternalInterface.call("myFlashLightBoxInjector.reset");
ExternalInterface.call("myFlashLightBoxInjector.appendElement", infostruc[this.cid].httpType + infostruc[this.cid].art + "", photoArray[i].auth + "", "photoFrame" + infostruc[this.cid].art + "", "mySetOfImages");
mc.onPress = function():Void {
if ((getTimer()-this.pressTime<=doubleClickRegister && this.pressTime) || !doubleClickURL) {
if (infostruc[this.cid].urlToGet) {
ExternalInterface.call("myFlashLightBoxInjector.start",infostruc[this.cid].httpType + infostruc[this.cid].art + "");
}
}
ExternalInterface.call("myFlashLightBoxInjector.updateImageList");
this.pressTime = getTimer();
current = this.cid+1;
updateInfo();
};
@ LuK : what you’re looking for is to use Lightbox from within an iframe, yet targetting the parent window. Lytebox indeed can do this as I have read, yet a modded Lightbox can do this too. Both are untested though, hope you can figure it out (I’m currently very busy, so can’t help you right now).
@ Chris : you’ve mailed me that you have found the solution already. Care to post it here? It might help other people out (t)here
Early morning:
(Thought people might want an explanation as some I wouldn’t have understood without playing with the script.)
In aways the solution is if your not familiar with the script find the loop which goes through every image (I set up some text box and set the value to the image until i saw it looped through all of them)
Place the Reset function above the loop. In the loop add all your variables in, using the append function.
After the loop is finished add in the update or in my case there was a section to check, and once all the images were loaded it set a value this was were I placed mine.
As for setUrl,
just replace it with ExternalInterface.call(“myFlashLightBoxInjector.start”,this.cid + “”);
I used the id in the loop for the unique id, which worked out nicely.
But I found one flaw, on certain machines the script does not like to work locally. I tried, and tried to find a solutions. If I upload onto the web it works.. Maybe someone can tell me why or find a solution?
Chris
Hi Bramus!
Came upon your script as I look thru the Lightbox forum – I am looking to have an image in a form script included in my Image View via Javascript. Lightbox2 cant do it – can flashLightbox?
The reason I need the image wrapped in a tag is that on each image that opens at the site below (click on “Gallery”, then choose a piece of art), the site visitor needs to see a PayPal “Buy Now” button. Paypal wraps those images in a form tag, and I cannot get the Flash/Lightbox javascript call to utilize such a tag (only an {HREF=} is working (with correct carats of course).
Would love to hear if I could utilitize your script instead!
Thanks!
Drew
http://www.boelterlincoln.com/slag/
@Andrew: I see you’re using LightboxDelegate; which can be used too. Set the onclick of the button (type image) to call LightboxDelegate() with the correct parameters.
Hi…
I am a newbie as far as javascript goes, but i have been using actionscript to create my portfoliowebsite. When I discoved shadowboxing images, i figured that might be a nice, dynamic way of letting viewer look at my work, how ever, HELP!! I do not understand all the steps I must go thruough just to get this to work!
I am using actionscript 2.0 and Flash CS3.
My entire site is ONE (1) SWF, embedded into an HTML page in Dreamweaver.
I would like the option for a viewer to click one of my image thumb buttons, and run an “on(Release)” command to call this javascript into action, from the FLASH BUTTON, using images stored on my webserver.
What do I need to do? What files files from the flashlightboxinjector download need to be on the server, and where? Are there specific directories i need to create for this? In Dreamweaver, do I have to do extra HTML coding even tho my entire site is basically a flash movie? What would my code look like in AS 2.0 for my flash button? Any help would be greatly appreciated. I am trying to wrap up final revisions to my site
Thank You!!
I have got this to work, the problem I’m having is that my flash in the back ground is disappearing. Is there any way to prevent that?
Thank you
Hi Bramus!
Read your comment from Oct 27th, thanks for the fix.
Hi Bramus,
I had one issue while using your great script. Is there a compatibility Issue with Lightbox2.04? I’ve used your script with Lightbox2.03 and it works seamlessly, but there seems to be an issue regarding compatibility with MacOS and Firefox, so I wanted to upgrade to 2.04, which didn’t work at all for me… Any help would greatly be appreciated!
@Derek: in order to use flashLightBoxInjector with 2.0.4 you’ll need to make 1 tiny change to the lightbox.js source file. You’ll need to change the very last line from:
document.observe('dom:loaded', function () { new Lightbox(); });to
document.observe('dom:loaded', function () { myLightbox = new Lightbox(); });For some reason unknown to me, Lokesh has removed the instantiation into a variable. I’ve mailed him about this issue and hope to see it fixed in a newer version of Lightbox.
Regards,
Bram.
I was just wondering if with this lightbox source allows for the loading of html or php documents in the lightbox?
@Ryan: no that’s not possible.
for this to work do i have to use your lightbox js because i know of one that allows for the use of an html page to be opened in the lightbox?
hello bram, i have a urgent question for you. i saw your example with the lightbox loaded from a flash file. but in your example the swf is dinamically loaded from the web, from flickr, isn’t?
i would like to do the same thing but from a flash button.. so if i release the flash button (the final swf is inserted in an html simple page) i would like to launch a little pictures gallery.
can you send me a sample example please?
thank you aniway
my mail is angelucci.diego@gmail.com
In a comment above (10/07) you said if the swf is hidden (ie. no transparency to Lightbox background) then do this:
- your swf is hidden as Lightbox does this automatically. To not hide it, comment out lines #376 (which reads hideFlash();) & #624 (which reads showFlash();) from Lightbox.js by placing // in front of the lines.
I have the same problem with transparency (can’t see my flash file in the background), but I went to Lightbox.js and the line numbers don’t match any code dealing with Flash. In fact I can’t find any references to Flash anywhere in the js file. Any recommendations? Everything else works OK. I have some looping effects and sound in the full page Flash file. Could that be hosing up the transparency?
Fixed it…
I had to downgrade to V1.1 in order to be able to comment-out the flash related lines in the js file. All is good now. Transparency works great.
I think something is broken in V1.2 (Lightbox 2.04) that screws up transparency on full page flash sites.
@Taki: Given that the gallery is already there and you know the id of the image you want to start (prerably the first one), you’ll only need to call
ExternalInterface.call("myFlashLightBoxInjector.start", uniqueIdOfTheImage + "");whereuniqueIdOfTheImageof course is the ID of the first lightbox-link@ Jim: Will check that out; Thanks!
Hello Bramus! Thank you for the wonderful scripts.
I used the flash LightBox Injector on my website http://www.pacomelo.com in order to display some of my work on the “Portfolio” section (icons hanging from a tree). I tested on FF and Safari and it runs fine however I got some comments that is not working on IE 7. I haven’t been able to find any comments from people with similar problems yet and since I have a Mac (and no IE 7 available) is hard for me to do any testing. Any ideas what is going on?
Any comments will be greatly appreciated…
Cheers,
-Paco
Hi Bramus,
I have a .swf file that I want to run in a lightbox and have tried lightwindow and another one but it won’t read my xml when open in the lightbox. Will flashlightboxinjector do it?
Thanks
Ben
@Whathell: hmmz, can’t really pinpoint that one but am seeing a JS error. You could try installing companion.js/debugbar (both IE plugins) in order to get some more information about the error.
@Ben: flashLightBoxInjector will indeed do it (tip: read this page its intro and/or check out the demo’s
)
Hi Bramus,
Have you received a reply about the myLightbox variable instantiation that disappeared? I have numerous sites that I would like to update with Lightbox 2.04, and I don’t really want to put in hacks in the author’s code, except if this is a permanent change.
@Francois: Hmmz, can’t find anything back … can you post your question here in the thread?
Hi,
I need i little help.
I make a test with the “Static Code” and it works. But when i try to use the function “appendElement” it dont work, im calling the exactly id that i injected and they just make the screen dark and dont show the white window with the image. Take a look:
import flash.external.*;
stop();
ExternalInterface.call(“myFlashLightBoxInjector.appendElement”, “images/image-1.jpg”, “its a test”, “test”, “group”);
btnteste.onRelease = function() {
ExternalInterface.call(“myFlashLightBoxInjector.start”, “test”);
}
Hey, I like what youve done with the flashinjector. I can get it to work in IE and FF and everything.
But where I am stuck on is trying to call the Lightbox from a button, that is located in a Movie Clip on the main timeline
Ive tried allsorts of things.
_root.mcname.btnname.ExternalInterface.call(“myFlashLightBoxInjector.start”, “Edge2″);
ive tried just in the MC
on release :
ExternalInterface.call(“myFlashLightBoxInjector.start”, “Edge2″);
tried in the MC onrlease:
_root.ExternalInterface.call(“myFlashLightBoxInjector.start”, “Edge2″);
even tried to put the action onto the button itself.
Just cant get it to work.
But when I put my button on the main timeline it works great.
with simple blahbtn.on rlease ( ;
ExternalInterface.call(“myFlashLightBoxInjector.start”, “Edge2″);
Anyone have any ideas, I dont know how often people check here.
I just want the button thats in a MC to call up the lightbox.
Im struggling here.
@Allen, @Tom: check your Flash Export Settings … be sure to have at least Flash Player 8 selected (have noticed that ExternalInterface can’t be called upon in FP7)
Bramus,
Is there a way to get this to work with LightWindow?
Thanks!
@Kenet: It’s possible … if you write your own handler class that is.
I’m aware of a version for ShadowBox, inspired upon the work I’ve done. Maybe that’s an alternative?
Hi Bramus!
I have a website build with Flash. In the main Flash file I use mx.controls.Loader to load and replace parts of the main file and one of the loaded files is a gallery.
Question: Is it possible to use the flashlightboxinjector on that gallery?
Preisler
Hi Bramus. First I’d like to congratulate you for your research and script, it’s just great!!!
I’m using the flashinjector in my portfolio (www.tiagopimentel.com) and it’s doing fine. If you can visit the link you can check it out. But I did a flash script that change somethings in the site according to the hour of the day. If you adjust your computer clock to something between 8 pm and 5 am you will see what i’m talking about. And when I have a Flash mask in that part of the site and I click a job and it have to open in the Lightbox it simply don’t show it up. Do you have any idea what I’m doing wrong? The script have a bug when you use a Flash Mask?
thanks in advance
Tiago
i stubled across your site from another site that said you were trying to make your lightbox injector work with photoflow.
I have done something similar you can check it at http://www.donkeydesigns.net maybe youll find something you can use
Hey, everythiing is working fine in regards to loading dynamic images. However, if I substitute I try to load a swf instead of an image I get a broken link. Is it possible to load swfs? If so please advise how. Thanks, good work.
Hey,
flashlightboxinjector is a god send. You’ve ridded me of a huge headache. I have one problem though. I already had the images displayed in my flash clip. If I hard code an image id to call, for example roadtrip2, it works perfectly. I tried to do this, however, and won’t work.
private function onClick(event:MouseEvent):void {
lbExpand=event.currentTarget.name;
trace(“lbExpand: ” + lbExpand);
ExternalInterface.call(“myFlashLightBoxInjector.start”,lbExpand + “”);
}
lbExpand is a string. It contains myImage0, myImage1, myImage2…etc. Those are the id’s I’ve attached to the images in my html. If I replace lbExpand with say, myImage5, it loads myImage 5. Using lbExpand fubar’s it though. Any suggestions?
You can totally disregard that question. Lightbox will never work if you don’t specify the right directory for the images. Works perfectly. Thanks for this great tool.
Maybe I don’t really hate spam. Sorry for the trifecta but I do have a question. When lightbox kicks in, rather than the overlay fading in, it flashes in. Any idea what might be causing that?
Hello, I’m from Germany, sorry bout my bad english haha, I’ve got a problem with the Lightbox 2.04. I’ve got a Flash-Page and want to directly start the Lightbox Diashow from a textbutton, without havin thumbs, Javascript bumpin up on the same page, like not startin a new html. Short form: startin that Javascript from Lightbox 2.04 via Textbutton from Flash. Any way to realize it? THX
Hi, it´s awesome how u did the solution for calling lightbox roadtrip from flash, really awesome! The best what i´ve find. But i am noobie and ionno how i can do my flash gallery working with lightbox roadtrip. If can help me, please contact me by e-mail jakub@probrand.cz and i will send u my simple flash gallery (working eith lightbox, but not working roadtrip). Thank you very much!
Hi, I have a flash site(several.hu/ujfox007), and works everything with lightbox. But if i use IE and open the lightbox, the sound in the flash disappear. In firefox everything is oké.
How can i do this problem?
Sorry my poor english:)
Hi,
first, I appologies for my english…
I’m trying to use your awesome script but after 2 days of researches, I really need some help.
I don’t understand what is the XML structure so I can use my own (and not a flickr link)
Hope anyone could help
Thanks a lot
I finally found a solution !!
It works great !
Thanks !
Maybe I’m wrong, but if you don’t want swf to disapear, you can change line 205 of lightbox.js (V1.2) from
$$(’select’, ‘object’, ‘embed’).each(function(node){ node.style.visibility = ‘hidden’ });
to
$$(’select’, ‘object’, ‘embed’).each(function(node){ node.style.visibility = ‘normal’ });
Bramus, any luck with the Opera 9 problem? I’ve noticed that it’s really only on Opera Mac. The Windows version displays Flash fine.
@kimweb:
Could you post the XML structure that you found the solution to? I don’t know coding at all, but cut & paste my way through. I don’t want to use the flickr link either. Do I need to comment “//” a specific code out? Thanks.
“Yeti”
Bramus, it’s the first time I use Lightbox. I’m using static code and have a fullscreen flash. The problem if that if I insert the links in the html, the show below the flash animation. Where should I place them if I want them to be hidden, but still available to be called from within the flash movie?
Thanks
Sorry Bramus, I should have read all the comments, I figured it out. Great script by the way!
When using the static code and adding
import flash.external.*;
to my ActionScript, I keep getting a syntax error on exporting:
import flash.external.*;
btnShowImage.onRelease = function() {
ExternalInterface.call(“myFlashLightBoxInjector.start”, “image1″);
}
Evrythign is set up perfectly, and LightBox works from an HTML link. I just can’t get Flash to cooperate. Running CS3.
@Bill: Make sure you export your SWF as Flash Player 8 compatible. Lower won’t work.
Hi Bramus,
I’m using this to launch lightbox from a thumbnail gallery that is loaded from an xml file. Everything is working except that no matter what thumbnail I click, lightbox always opens the first image in the xml file. I can’t figure it out so I thought I’d ask you. Here is my AS
import fl.containers.UILoader;
import caurina.transitions.*;
import flash.external.*;
//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
/* loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
myXML = XML(event.target.data);
xmlList = myXML.children();
ExternalInterface.call("myFlashLightBoxInjector.reset");
for (var i:int=0; i<xmlList.length(); i++) {
var picURL:String = xmlList[i].url;
var picName:String = xmlList[i].big_url;
arrayURL.push(picURL);
arrayName.push(picName);
holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
holderArray[i].name = arrayName[i];
holderArray[i].buttonMode = true;
if (i<nrColumns) {
holderArray[i].y = 65;
holderArray[i].x = i*110+65;
} else {
holderArray[i].y = holderArray[i-nrColumns].y+110;
holderArray[i].x = holderArray[i-nrColumns].x;
}
thumbsHolder.addChild(holderArray[i]);
ExternalInterface.call("myFlashLightBoxInjector.appendElement", xmlList[i].big_url + "", "persons");
thumbsHolder.addEventListener(MouseEvent.CLICK, calllightbox);
}
function calllightbox(event:MouseEvent):void{
ExternalInterface.call("myFlashLightBoxInjector.start", this._name + "");
trace("lightbox called")
}
}
ExternalInterface.call("myFlashLightBoxInjector.updateImageList");
my xml is structured like this:
thumbnails/ext1.jpg
bigimages/ext1.jpg
thumbnails/ext2.jpg
bigimages/ext2.jpg
Do I have to change my xml file? Or is there a problem in my AS. Sorry if the answer is obvious, I suck at coding but I’m getting better. Any help would be greatly appreciated.
Thanks
Sorry the tags in my xml file structure didn’t show up like I thought they would. Here is the structure with braces instead of brackets:
(images)
(image)
(url)thumbnails/ext1.jpg(/url)
(big_url)bigimages/ext1.jpg(/big_url)
(/image)
(image)
(url)thumbnails/ext2.jpg(/url)
(big_url)bigimages/ext2.jpg(/big_url)
(/image)
(/images)
Thanks
Hi Bramus:
Pardon my caveman question; is this compatible with AS3?
Thanks,
John
Is there any one to modify the code below so that I can place on an object’s actionscript such as a Button?
btnShowImage.onRelease = function() {
ExternalInterface.call(“myFlashLightBoxInjector.start”, “roadTripImage2″);
}
to
on(release) {
}
Thanks.
hi, is there a version of flashLightBoxInjector that would work with Slimbox2?
hi been trying hard to understand how lightbox 2 works with flash. But I’m so confused on what to do…
1. where do i put the files/which files?
2.where do u put your own sized images in so that they can be call when clicked?
3. basically need a step by step guide, NEED HELP BAD!!!!!
hopefully you can help me, cheers
hi i’ve implemented this semi-successfully into a gallery. it seems to work in safari on mac but not in firefox. i haven’t yet been able to test it on a pc. are there currently any bugs?
link using flashlightboxinjection 1.2 and lightbox 2.04
thanks
ok now it seems to work fine in firefox but still need to test on other computers. thanks for the great code!!
Hi bramus and the rest of the visitors
i would like to use lightbox (lightframe) to display other site pages from a flash file
What do i have to change to accomplish this ?
Also because of the newbie level in flash when you say “import flash.external.*;” do i have to substitute the * with something else or it’s the exact syntax
are this .js support or posibble we use in ‘multibox’ ?
regard from indonesia
I’m having trouble getting this to work (using static code). The links show up on my HTML page, all of which initiate lightbox fine, but the buttons in my swf don’t seem to want to work (and yes, i have changed the upper/lower case error for the id).
Could it be because I’m using AS3? (I’m currently calling myFlashLightBoxInjector.start through a function triggered by an event listener)
Hi,
thanks a ton for the injector, i am an amateur id say at Actionscripting. how can i load thumbnails from xml onto my flash file and then connect it to the lightbox. this should be really simple but cant figure out how to do it. please help. PLEASE.
Hi Bramus!
Thank you very much for the code. I implemented it in a site I am doing for my wedding just for fun. Funny thing is that lightbox turns off my music. Sounds work after I close the box but my timeline music is gone. Any suggestions?
Thanks again,
NickS
Hi,
Just wanted to check if this works with AS3 before I try to implement it.
Thanks!
Hi Bramus!
I’m currently working on a site for a photographer in flash and I’m having a real hard time trying to add lightbox into the site to show an added enlargement of the photos. I’ve been working on trying to figure this out for several days and have tried several people’s tutorials on how to do it but after countless headaches, I’m on my last leg. I think my problem might be that my flash file is somewhat complex. The page in which I want the button to show the lightbox is about 3 pages in from the main page. I’ve been trying to use the as to call the lightbox from that sub page, is this wrong? Should I be calling it from the main page? If so how do I link that to a button in another swf located inside that page called from a uiloader? I am a beginner when it comes to html (using dreamweaver) but I’ve done everything that I needed to in all these tutorials. I’ve gotten the lightbox to work directly from the html but It never seems to work when I try to do any of it from flash. With the as I was trying to use from your instructions for the lightboxinjector I kept getting error reports like ShowImage is not a definition keyword. I ended up using
import flash.external.*;
burm1e_btn.addEventListener(MouseEvent.CLICK,callJS);
function callJS(evt:MouseEvent):void{
ExternalInterface.call(“myFlashLightBoxInjector.start”,”burmesemigrants”);
}
which doesn’t give me any error messages but when I view the page in the browser with dreamweaver the button brings up a message in firefox (adobe flash player has stopped a potentially unsafe operation” and in safari it simply brings up a black blank page. This is what I have in html other than the lightbox2 lines to set that up
I took out the “image #1″ in the projects, where I want the lightbox to appear is when you click on the detail image.) Please, I don’t know what else to try/do.
Hi..
I love this code and what it can do, but I just noticed that it’s not working for me in Internet Explorer. Every single other browser I checked seems to work out just fine. Did I miss a fix along the way that will allow this to work with IE? If so, can you pleeeaaseee help me figure out where it is and how to fix?
does this work with actionscipt 3?
Could anyone make it works with swishmax???
I need help
Lovin this just 2 things
How can I make the Thumbnail bigger like a 100 by 100?
And also so how can I get them to come in just in a line not all rotated?
Help would be great!
THANKS!
Ernie
Hei ppl!
Does anyone figure out the Internet explorer bug that stop my sound my flash site when a open a lightbox image?
Thanks in advanced!
Has anyone have to deal with transparency and this script hiding flash? i can add a
and it will show the bg but i cant get the lightbox to be transparent over my full screen flash movie
ok i figured out the problem with the transparency
in line 205 of lightbox.js theres a piece of code
$$(’select’, ‘object’, ‘embed’).each(function(node){ node.style.visibility = ‘hidden’ });
Which needed to be removed which i did and its not hiding my flash anymore the only problem i have now is that im not getting the shadowy overlay that surrounds the photo:
http://tat2edup.com/sample/gallery/
im just over looking one minor thing here. i know it..
I hope this helps pave the way for the people in my shoes atm. If you encounter or know a way to fix it please help.
okay i finally fixed it
line 52 in lightbox.js
I was going crazy trying everything that i had changed the line below to 0.2 and completely forgot about the change
when i rememeber going though all the steps when i set it back to default it fixed it. So make sure u leave this line defaulted @ 0.8 and take out the line above.
overlayOpacity: 0.8, // controls transparency of shadow overlay
i am having trouble with getting the flashlight box injector to work nothing happens when i click my button in my flash site that is suppose to call the injector here is my html and actionscript 3 code
html
Untitled Document
<!–
Content on this page requires a newer version of Adobe Flash Player.
<!–
actionscript
import flash.external.*;
officers.addEventListener(flash.events.MouseEvent.CLICK, lightbox);
function lightbox(event:MouseEvent) {
flash.external.ExternalInterface.call(“myFlashLightBoxInjector.start”, “myphotoimage1″);
return;
}
here is my html code
Hi Bramus,
read through all the comments and still stuck.
Lightbox 2 working fine in my html.
But Im confused as to what to do in my flash file.
Using the static code example but cant seem to set it up right in flash. Yes Im publishing with Flash Player 8.
What I dont understand is why you couldnt make the ’simple’ example .fla file just use images found locally with none of the flickr/xml functionality, which quite frankly confuses me and is only really required for the more ‘complex’ examples.
Its a fantastic script, but like alot of people on the comments I dont know how to implement the actionscript. Please help.
Tom.
I’m having the same problem as shane. Doesn’t work with Internet Explorer.
Max Lopez, thanks so much mate. Saved alot of my time!!!
Open a lightbox from a Flash movie http://tips-linux.net/en/content/open-lightbox-flash-movie-embedded-drupal
There are too many problems with Lightbox, mostly if you use it from Flash! When it runs from a MovieClip call, it hides the whole site and there is no need to use the transparent image. Also, it stops all sounds when it run from Internet Explorer (which is the tool that 70% of users use…). It is a nice tool but… if it works! DO SOMETHING TO HELP US… AND STOP ASKING FOR A DONATION BECAUSE IT IS “NOT” WORKING FINE…!!
Yannis
Hey Bramus, what lines need to be commented out of the lightbox javascript to keep flash visible in the background using lightbox 2.04?
This is the first script that worked well in all browsers for me, thanks for the great work…
Hi
I have used this as3. Freddy is an mc on the stage
import flash.external.ExternalInterface;
ExternalInterface.call(“myFlashLightBoxInjector.reset”);
ExternalInterface.call(“myFlashLightBoxInjector.appendElement”, “http://www.ee-web.co.uk/tests/lightbox/pic1.jpg”+”", “title1″+”", “uniqueId1″+”", “stopm”+”");
ExternalInterface.call(“myFlashLightBoxInjector.updateImageList”);
freddy.addEventListener(MouseEvent.CLICK, goAndGetIt);
function goAndGetIt(e:Event):void{
if (ExternalInterface.available)
{
ExternalInterface.call(“myFlashLightBoxInjector.start”, “uniqueId1″+”");
}
}
when I press freddy the whole stage goes gray – you can’t see the swf at all. There is no image either.
I appreciate your time
Edward