Lightbox2 & Flash AS3 Redux
Back in October I was building a Flash site and it required the use of a gallery. Since I almost always use LightBox for galleries, I wanted to do the same for this site. Problem is, I could not get LightBox to work with Flash AS3.
I search all over for a solution, but none would work. I ended up getting it to work using a variety of methods, and subsequently wrote a blog post detailing how I did it. Original post it here.
However, not everyone who read that post could get it to work. And when I tried to recreate the file, I could not do it. My original file worked, but new files would not.
A commentator named Rio questioned if the LightBox version may be the issue. And after checking into it, I found it was the issue. My original file used LightBox version 2.03.3 but my new files were using 2.04.
Comparing source code it appears the new version is quite different from previous versions. So I simply used my original LightBox files and sure enough, everything fell into place and works fine now.
I made some slight changes to the codes, by adding a Trace to the Flash file to ensure the button was working, and I slightly altered the HTML JavaScript.
See it in action here.
Download the Source File here.
Here are the revised instructions using LighBox 2.03.3 and Flash AS3:
Using Adobe Flash CS3 (Creative Studio 3), make sure under your Publish Settings you are set to run AS3.
Now add your image thumbnail to your stage and using Convert to Symbol, convert it to a button.
Using your Property Inspector, give the thumbnail and Instance Name.
Add a New Layer to your scene and open the Actions Palette. In the action Palette add the following code.
1 2 3 4 5 | DaThumb.addEventListener(MouseEvent.CLICK,da_thumb); function da_thumb(event:MouseEvent):void { trace("test"); ExternalInterface.call("Design_Gallery", "your/image/link.jpg", "Membership Card"); } |
Publish your movie then open the HTML file your movie will be used on. In the HEAD of the html file we need to add the CSS (Cascading Style Sheets) and JavaScript calls to our LightBox files.
17 18 19 20 | <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"><!--mce:0--></script> <script src="js/scriptaculous.js?load=effects" type="text/javascript"><!--mce:1--></script> <script src="js/lightbox.js" type="text/javascript"><!--mce:2--></script> |
Once we have the scripts and CSS loaded onto our page we need to set some custom JavaScript to work with our Flash file. Place this code right after the above scripts.
27 28 29 30 31 32 33 34 35 36 | <script type="text/javascript"></script><script type="text/javascript"> function Design_Gallery(url,caption) { var imgLink = document.createElement('a'); imgLink.setAttribute('href', url); imgLink.setAttribute('title', caption); imgLink.setAttribute('rel','lightbox', '[design]'); Lightbox.prototype.start(imgLink); } </script> |
What this does is work with the Action Script we used in our Flash file.
- function Design Gallery – Our Function we set up
- href – The link we used
- title – The title we set
- rel – The light box call we need.
This will enable our Lightbox JavaScript to work with our Flash AS3 script. The gallery will almost work now. If used, it will not display correctly as Flash, by default, is the top most element on a page. We need to edit our object and embed codes so that the LightBox overlay will appear on top of our Flash movie.
Locate (or add) the wmode tag in your RunContent JavaScript and your Script Access Tag and set them to the following.
'wmode', 'transparent', 'allowScriptAccess','sameDomain',
Then do the same in the object and embed tags.
wmode="transparent" allowScriptAccess="sameDomain"
Here is a quick video showing where the codes etc were added.
Related posts
On: Jan7
Filed under: Tutorials, Web Design
Tags:ActionScript 3, Adobe, Adobe Flash CS3, AS3, code, CSS, Design, DOM, Flash, function, gallery, HTML, HuddleTogether, JavaScript, LightBox, lightbox2 call from as3, MouseEvent, movie, rel, setAttribute, wmode
79 Responses to “Lightbox2 & Flash AS3 Redux”
[...] Lightbox2 & Flash AS3 Redux [...]
On:January 7th, 2009 at 10:17 amThis is easy to understand. Now, i can get it work fine.
Thanks for your help.
rio
On:January 12th, 2009 at 7:20 pmFor some reason my lightbox works in Chrome, and firefox but not IE. I get “script error” in IE.
Any help would be appreciated, and aside from that.. great work.
On:January 31st, 2009 at 7:57 pm@Slake: Hey Slake. Can you post a link to your test site so I can see the error?
On:February 1st, 2009 at 8:42 amhttp://www.stevemocrae.com/studio/
It’s very unfinished so basically once it loads click “Web Development” then click the one thumbnail that pops up. It works fine in chrome, but not IE. Thanks in advance.
On:February 1st, 2009 at 1:10 pmAnd apparently my flash isnt even loading in IE now.. sigh. I’ll see if I can fix that.
On:February 1st, 2009 at 1:16 pm@Slake: I must have checked it as you were working on it. First time around it did not load in FF, but then refresh and it was good to go.
Checked in IE, and it loads but with errors and it does not load the LightBox.
I notice you use an abbreviated embed/object code. I would suggest using the full embed code for the Flash file. You can see full code on the example page i set up.
Your also not loading the ActiveRunContent script. That needs to be loaded in order to load Flash the way you are.
See if that helps.
On:February 1st, 2009 at 2:03 pmOkay, so you completely solved not only the lightbox problem, but another problem I was having. You are awesome, and thank you!
Now, I don’t mean to drift off topic, but if your willing I am having a few issues with the new embed code. I’m sure it’s just few little tweaks, but I’m having some trouble with it. The lightbox now works in IE, but I can’t get the flash itself to center anymore. Also, the flash no longer shows in chrome (and I assume FF) at all. Again, I’m sure it’s just the embed code but if you could have another quick peak, I would really appreciate it.
Thanks again regardless, you helped a ton!
Slake
On:February 1st, 2009 at 3:28 pm@Slake: Glad to help. Centering is not working because of your styles.
You have
It is missing a # for the top margin, and if you set the left to 0, it will stick everything to the left. Remove the left margin.
Then wrap the Flash file in a dive with a center alignment.
The top margin is important to have a # there, if you use it. If no number, it will invalidate all styles. So either give it a number, or remove the call.
Your style is also trying to call a background image, but the image is not found on the server. At least not where it is looking for it.
Fix your style issue and test again to see if it works.
Winnipeg Web Design’s last blog post..Willy Cruz & The Big Dub Style Sound
On:February 1st, 2009 at 3:38 pmEverything is now working great, thank you SO much! Great work.
On:February 1st, 2009 at 4:25 pmGood to hear!
On:February 1st, 2009 at 4:26 pmHi, yeah it’s me again.
Is it possible to set this Lightbox up in flash with imagesets, as seen on the lightbox2 site? I have it working fine with a single image.
http://www.stevemocrae.com/studio – Click on Web Development, then click Steve Mocrae.
Thanks.
On:February 1st, 2009 at 8:30 pm@Slake: Technically, it should be possible. But I have yet to be able to do it. The gallery I used it on, has 11 images, so I would like to use the gallery function. But I have tried numerous things, none have worked.
If you, or anyone else, can figure that out, I would love to know.
On:February 2nd, 2009 at 8:47 am@MrMyles
I’m not sure if you have seen this person’s post, but he doesn’t use Actionscript 3, so I have been having trouble with the image sets myself. Maybe it’ll help you, maybe it won’t. Hopefully it’ll help, so I can read hear and see how to implement it too.
http://blog.codefidelity.com/?p=18
On:February 6th, 2009 at 10:40 am@MrMyles
I’m not sure if you have seen this person’s post, but he doesn’t use Actionscript 3 (as he uses “getURL”), so I have been having trouble with the image sets myself. Maybe it’ll help you, maybe it won’t. Hopefully it’ll help, so I can read hear and see how to implement it too.
http://blog.codefidelity.com/?p=18
On:February 6th, 2009 at 10:41 am@MrMyles: Ah crap, I don’t know if you got the post or not, here I’m re-posting.
Anyways, this person gets the imagesets to work, but he doesn’t use actionscript 3 (he uses “getURL”). I’ve been having trouble getting it to work. Hopefully you can tweak it somehow. Looking forward to your solution.
http://blog.codefidelity.com/?p=18
On:February 6th, 2009 at 10:44 am@“Yeti”: They are using AS2, and a different method to call LB. I used AS3 and had to use a different method as the AS2 method does not work in AS3. The site I was building, needed AS3 for other parts, so I had no choice but to go that route and find a way to do it in AS3.
If you do not need to use AS3 for anything in your Flash file, use AS2, and the method they illustrate. As it certainly does work and is easier to do (I think). But if you need to use AS3, you will need to use the method I outlined.
As I said though, I tried numerous possibilities, including the ones at CodeFidelity. And hacked versions of what they did mixed with what I did. Got no love from any attempt, so I just stick with 1 image at a time.
Thanks for the tip though.
On:February 6th, 2009 at 10:50 am@MrMyles: I apologize for the double post earlier.
Well, the FLA (Flash Source Document) I have requires AS3, so I’m in your same position (with less skill, haha). Thanks for responding back. I’m still searching the net for a solution for the multiple images. If I happen upon it, I’ll let you know. Thanks.
On:February 6th, 2009 at 12:27 pmHello again!
I’ve been redoing my portfolio stuff, but I’m having a problem. The LB works fine. However, my flash site is not visible in the background. Any help would be great.
To view, go to http://www.stevemocrae.com/studio and click on “Web Development” then any of the projects in there.
Thanks,
On:February 21st, 2009 at 11:53 amSlake
pff, i’m getting stuck into thiss
“builder” is not defined – error
On:February 27th, 2009 at 7:15 am@Slake: Nice site Slake. Now that you mention it, yeah the overlay is not transparent. Hmmmm, wonder why?
On:February 27th, 2009 at 7:56 am@President: Can you give more info? AS2 or AS3? What code did you use? When does the error pop up?
On:February 27th, 2009 at 7:57 am@MrMyles:
AS3..
i can click correctly (trace), but there is no “lightbox” appearing..
error @ line 133.. line 133 says
if (versionStr == -1 ) { //ln 133
return false;
}
President’s last blog post..Autodelen stijgt in populariteit
On:February 27th, 2009 at 8:49 am@President: When do you get that error? On the HTML page, or in Flash?
On:February 27th, 2009 at 8:52 amin debug screen @ IE
President’s last blog post..Autodelen stijgt in populariteit
On:February 27th, 2009 at 8:57 am@President: Got a link?
On:February 27th, 2009 at 8:59 amhttp://www.minirock.be/dink/test.html
http://pastebin.be/16917
President’s last blog post..Autodelen stijgt in populariteit
On:February 27th, 2009 at 9:09 am@President: You have the wrong version of Light box. As shown in the post, you need 2.03.3 but you are using 2.04. Downgrade your script and it will work.
On:February 27th, 2009 at 9:16 amTHX, that will now work..
[edit] bad luck
the img wouldn’t load.. must i have “relative” path’s or absolute?
“ExternalInterface.call(“Design_Gallery”, “/sponsorlogos/absoluut.jpg”, “Membership Card”);”
or
“ExternalInterface.call(“Design_Gallery”, “http://www.minirock.be/dink/sponsorlogos/absoluut.jpg”, “Membership Card”);”
President’s last blog post..Autodelen stijgt in populariteit
On:February 27th, 2009 at 9:46 am@President: I use relative, but no reason direct would not work. Just make sure the image is where you say it is in Flash.
On:February 27th, 2009 at 9:51 amHey Myles,
I’ve re routed my site to http://www.e7studios.com/ but I still have not fixed my situation. I notice on the example file used here, the flash in the background disappears as well.
If we could work on correcting this somehow, I’d be very happy.
Slake
On:February 27th, 2009 at 5:57 pmThank you soo much for this tutorial…..I’ve been pulling my hair trying to figure this out from tutorials that have only used Lightbox in AS2.
Questions,
1. If I am generating links and images from an XML file through Flash, what would I need to add for this to work?
2. How can I change the blue background color and make it transparent?
Thanks again for all your help!
On:March 9th, 2009 at 8:35 pmHi Christina
The blue background can be changed in the CSS (Cascading Style Sheets) file to any colour you need. But I have yet to get the transparent overlay to work. I have tried dozens of things, none works. So I have just settled for it as is. Not as nice as it could be, but close enough. I would love to hear if anyone has been able to crack that overlay issue though.
I am unsure of what to do when loading from XML files. I have not had a need to try this yet. Though I have an upcoming project that might need me to do it, but that is not for some time yet, and may not be needed either.
Thanks
Myles
On:March 10th, 2009 at 7:49 amRe: The blue color
Go to the lightbox.css file (CSS (Cascading Style Sheets) -> lightbox.css) and find the settings for “background-color”.
In the source files you make available on this site it has a value set to: “00467e”
That’s where the blue overlay is coming from.
Reset that value to “000″ and it should work fine. Alternately, you can just download ‘clean’ lightbox files from the developer’s site.
On:May 27th, 2009 at 10:58 amThanks.
Changing the colour is easy, no question. It is the transparency of the colour that is an issue. The Flash file underneath the overlay is not visible.
Yes, download clean code, just make sure you have the right version, as new versions do not work with this.
On:May 27th, 2009 at 11:03 amActually it is transparent, or translucent… At least on my half-arsed test it was.
I wasn’t sure until I added a link to a jpeg in my html so that it appeared below the swf on the Webpage when it loaded. When the grey background came up, the jpg was visible underneath the lightbox effect.
The problem (if there is one) seems to be with the swf file. When the lightbox effect initiates, it seems to remove the swf file from the stage.
Of course it comes back when the lightbox effect is ‘removed’ so it’s not that catastrophic. Not sure what the fix is for that though.
Great piece of code though. Thanks.
On:May 27th, 2009 at 11:21 amGreat code indeed…i had been trying to figure this out since about 8-10 hours and only this post really helped me do this with AS3.
…I am going to work on loading the images from xml ; hence will let you know soon.
Thanks again
On:June 7th, 2009 at 4:46 amThanks. Please do let me know how XML loading goes. Certainly would be a good idea to do that to ease site updates.
Myles
On:June 8th, 2009 at 9:17 pmHi all,
The transparent background worked for me when i used the .js files from “http://www.huddletogether.com/projects/lightbox2/” and included lightbox++….i don’t know why though:)…
On:June 15th, 2009 at 11:28 pmI have 1 issue i need to discuss. I need to use 2 kinds of lightboxes in my website. Say one with white boundary and the other with black. Will i need to replicate all the lightbox files??
On:June 15th, 2009 at 11:31 pmHi Nirali
I have never thought of doing that, in Flash or otherwise. Not sure it is possible.
Any reason you need to do it that way?
On:June 18th, 2009 at 6:15 pmHi,
I downloaded the source files and opened the index.html. But when I click the image in the index it won’t start lightbox. I checked the version of lightbox and it’s: v2.03.3 so that is ok. I’m using firefox on a mac. The demo on top of this page is working fine.
Am I doing something wrong?
On:July 11th, 2009 at 9:18 amo, i found out that when i upload the files that is does work. Why isn’t it working on my hard disk?
On:July 11th, 2009 at 9:29 am@Jarno: Hi Jarno.
In the sample, when loading locally, Flash will give security errors. It is due to the way the images are direct linked to my site.
You can edit the files to link to your own local images and not get the error.
Thanks
Myles
On:July 14th, 2009 at 8:56 amMrMyles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
Hi Mr Myles,
TY for this Tutorial,
I figured out the Transparent overlay.
I added :
[code]
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
[/code]
to the lightbox.css, “#overlay” part.
here’s the test page:
http://zendik.org/test/
I have a Question, maybe you can help?
when Lightbox is on top of my page,
I can’t figure out why the “CloseX” button at the bottom is Missing, I’ve changed the lightbox.css but that didn’t do anything…?
any Ideas?
ThankYou again for this Tutorial.
On:September 4th, 2009 at 12:53 pmÂvalanche
@Âvalanche: Cool Site!
Checking your sample, IT WORKS! Thank-you. Going to go back to my files and test it out, thanks!
For the close button, it is not on your server. It is looking for the button here:
On:September 4th, 2009 at 1:03 pmhttp://zendik.org/images/close.gif
MrMyles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
@Âvalanche: Are you sure it is not completely hiding the Flash? Load more into your Flash movie or border it in Flash, then have it open a smaller image and see if you can still see your Flash file.
In mine, I can still see the background, the Flash file is still covered though.
On:September 4th, 2009 at 1:09 pmMyMyles-
Yes your right the Flash is being Hidden.
I’m sorry about that.
http://zendik.org/test/
Âvalanche
On:September 4th, 2009 at 2:36 pmNo problem. I really thought that was it when I saw your site.
On:September 4th, 2009 at 2:38 pmHI Again MrMyles,
I’ve been creating an AS3 XML gallery and using LightBox to showcase the Images, I’ve been using your codes, and Scripts as a Starting point.
I got flash to call LightBox but I’m not sure why LightBox can’t find the Images.
Here’s the URL: http://zendik.org/test/indexXML1.html
I’m not sure if its the AS in Flash or Your LightBox Script or Your Html Codes, that I need to Modify.
If you have some Time can you take a Look at this AS3 Code?
import fl.controls.ProgressBar; import flash.net.URLRequest; import flash.net.navigateToURL; import fl.transitions.Tween; import fl.transitions.easing.*; import fl.transitions.TweenEvent; import gs.TweenMax; var columns:Number; var my_x:Number; var my_y:Number; var my_thumb_width:Number; var my_thumb_height:Number; var my_images:XMLList; var my_total:Number; var container_mc:MovieClip; var preloaders_mc:MovieClip; var x_counter:Number = 0; var y_counter:Number = 0; var my_tweens:Array = []; var container_mc_tween:Tween; var full_tween:Tween; var myXMLLoader:URLLoader = new URLLoader(); myXMLLoader.load(new URLRequest("revGallery.xml")); myXMLLoader.addEventListener(Event.COMPLETE, processXML); function processXML(e:Event):void { var myXML:XML = new XML(e.target.data); columns = myXML.@COLUMNS; my_x = myXML.@XPOSITION; my_y = myXML.@YPOSITION; my_thumb_width = myXML.@WIDTH; my_thumb_height = myXML.@HEIGHT; my_images = myXML.IMAGE; my_total = my_images.length(); createContainer(); callThumbs(); myXMLLoader.removeEventListener(Event.COMPLETE, processXML); myXMLLoader = null; } function createContainer():void { container_mc = new MovieClip(); container_mc.x = my_x; container_mc.y = my_y; addChild(container_mc); container_mc.addEventListener(MouseEvent.CLICK, callFull); container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver); container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut); container_mc.buttonMode = true; preloaders_mc = new MovieClip(); preloaders_mc.x = container_mc.x; preloaders_mc.y = container_mc.y; addChild(preloaders_mc); } function callThumbs():void { for (var i:Number = 0; i < my_total; i++) { var thumb_url = my_images[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 = (my_thumb_width+10)*x_counter; thumb_loader.y = (my_thumb_height+10)*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 = my_thumb_width; preloader_pb.height = my_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,1, true); TweenMax.to(my_thumb, 1, {colorMatrixFilter:{colorize:0x000000, amount:0.35, saturation:0}}); TweenMax.to(my_thumb, 1, {dropShadowFilter:{color:0x000000, alpha:0.35, blurx:25, blury:25, alpha:0.35, distance:2}}); my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded); } function callFull(e:MouseEvent):void { var URLReq:URLRequest = new URLRequest (my_images[e.target.name].@FULL); try{ ExternalInterface.call("Design_Gallery","URLReq"); }catch (e:Error){ trace(e); } } function donePb(e:Event):void { var my_pb:ProgressBar = ProgressBar(e.target); preloaders_mc.removeChild(my_pb); my_pb.removeEventListener(Event.COMPLETE, donePb); } function tweenFinished(e:TweenEvent):void { var my_loader:Loader = Loader (e.target.obj); my_loader.unload(); 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 onOver(e:MouseEvent):void { var my_thumb:Loader = Loader(e.target); TweenMax.to(my_thumb, 0.45, {colorMatrixFilter:{colorize:0x000000, amount:0, saturation:1}}); } function onOut(e:MouseEvent):void { var my_thumb:Loader = Loader (e.target); TweenMax.to(my_thumb, 1, {colorMatrixFilter:{colorize:0x000000, amount:0.35, saturation:0}}); } root.addEventListener(MouseEvent.MOUSE_MOVE,f); var t:Timer=new Timer(5,0); t.addEventListener(TimerEvent.TIMER,moveF); function f(e:MouseEvent) { t.stop(); t.start(); } var speed:Number = .20; function moveF(e:TimerEvent) { container_mc.y=speed*container_mc.y+(1-speed)*(500-container_mc.height)*root.mouseY/500; if (Math.abs(container_mc.y-(500-container_mc.height)*root.mouseY/500)<1){ container_mc.y = ((500-container_mc.height)*root.mouseY/500); } e.updateAfterEvent(); }Here’s what my .xml Looks Like:
ThankYou for your Time
On:September 5th, 2009 at 3:01 pmÂvalanche
Here what the .xml looks like:
…P.S….”Im not sure why this didn’t post with the other codes”
Âvalanche
On:September 5th, 2009 at 3:06 pm@Âvalanche Sorry man, did not see you posted again. I’ve never done an XML gallery so I cannot say for sure, and I am only guessing here. LightBox is activated, so that part appears correct.
My guess is the XML file with the image locations. Try using direct links for the images instead of relative links.
Then if that works, you know your AS3 is correct, and the XML is correct, there is just an issue with the XML locating the images.
On:September 18th, 2009 at 8:25 ami would really like some help with this . . i cant seem to make the image pop up and appear. these are the files im using ! and im going crazy ! !
On:September 27th, 2009 at 6:19 pmhttp://www.magdalenabrown.com/Lightbox/VLB_FLA_TEST
@bunnyface Watch where your scripts are.
You are trying to load them from an engine folder, but you put them in a js folder.
You have :
You should have:
Hey MrMyles,
On:September 28th, 2009 at 12:51 amThanks for helping me out –
I had it that way originally because thats how lightbox had set it up, it had the js folder in a engine folder. Any how i have changed it like you suggested and its still not working. * confused*
im sure its something simple im not doing correctly, i just cant figure out what !
is there maybe somthing wrong with my flash file? ive been over it 20 times !
- and in fact on further examination, im sure its the flash movie, i used the exact code used in the demo, i simply replaced the .swf file. and it still wont work. so i must be doing something wrong there.
On:September 28th, 2009 at 2:34 amYou are not using Lightbox V2.03.3 as instructed. You are using Lightbox Slideshow V1.
Different script, with different coding. I have never used that version so I cannot comment on it.
But if you use the same scripts as the tutorial, it will work.
On:September 28th, 2009 at 7:11 amMyles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
ok just for the record im feeling really blond right now. in my defense i know nothing about this.- but its nice that is changing. thanks.
On:September 28th, 2009 at 5:54 pmok this is still not working, i have the correct version of lightbox
( http://webscripts.softpedia.com/scriptDownload/Lightbox-JS-Download-23560.html)
and i have followed through the flash instructions-
added the correct code, and this is still not working. im pulling my hair out here-
not sure where im going so wrong.
http://www.magdalenabrown.com/Lightbox/VLB_TEST_3/
I even just downloaded ur example file, and changed the .swf file and edited the code a bit . and i still cant make it happen.
On:September 28th, 2009 at 10:13 pmand after more pulling this apart, i even tried to use the downloaded example, but simply replacing the “membership-card.png”, and changing the code in flash to fit, and its still not working.. i dont mean to be annoying, i promise if i can get this working i will go away .. lol ..
On:September 28th, 2009 at 10:44 pmhttp://www.magdalenabrown.com/Lightbox/VLB_TEST_3/test_2.html
Works fine, though you need to link the script images (close/load).
On:September 29th, 2009 at 7:06 amhttp://screencast.com/t/yUBaenzm
ok so it seems it works when its uploaded to the internet , but not when its stored local on my mac. weird on my part there. you said i need to link the script images (close/load). ? not sure what you mean?
On:September 29th, 2009 at 7:25 amYes, it never works when loading locally, security issues in Flash. You should get a security warning when you load the file locally, and it will prevent the functions.
You are loading the script images from../images, but should only be using images/ as the images folder is in the same directory as the Flash file.
Edit the JS file to have the correct image location.
and
ooooh i get it now – thank you soo much for taking the time to help with this ! ! this is the best thing ever !
On:September 29th, 2009 at 9:25 amGlad to help.
On:September 29th, 2009 at 9:41 am… .. * blush* one last question… is there any possible way to do this in AS2. It looks like me and AS3- are not good friends.
On:September 30th, 2009 at 11:03 pm@bunnyface Yes, there are many tutuorials covering LightBox and Flash using AS2.
Try this one: http://blog.codefidelity.com/?p=18
Or Google for many more.
Getting LightBox to open from Flash is pretty easy when using AS2. AS3 is the tricky one.
On:October 1st, 2009 at 7:08 amMyles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
Hi There Myles,
i realise at this point this is waaaaay beyond being ur problem, ( this isnt even a question about your tutorial in particular) but it seems im having serious trouble making things work. The tutorial link you sent me is quite simple enough to follow, but for some reason it just wont make the light box appear. ive spent weeks trying to make light box work, and im feeling really stupid . –
if at any point you get a chance and could look at my link, if anything stands out as to why this is not working like it should i would love to hear.
http://magdalenabrown.com/Lightbox/BOX/box2.html
On:October 11th, 2009 at 5:11 pmUnless I am not seeing it, you do not have your lightbox scripts installed in that file.
Add the lightbox scripts and CSS (Cascading Style Sheets) files to the HTML mthen try it.
On:October 12th, 2009 at 8:55 amMyles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
so thats what is confusing me, – what is the code i am meant to be putting into the html doc.
It has this in it already ….
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);
}
and even when i add …… ( as shown in http://magdalenabrown.com/Lightbox/BOX/box3.html )
. . .
it still does not appear to work.
Am i meant to be adding them this way or another way ?
- Thank you for your help
On:October 12th, 2009 at 9:04 pm*sorry for second post, code disappears when i add it to this text box *
so thats what is confusing me, – what is the code i am meant to be putting into the html doc.
It has this in it already ….
*
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);
}
*
and even when i add …… ( as shown in http://magdalenabrown.com/Lightbox/BOX/box3.html )
*
*
it still does not appear to work.
Am i meant to be adding them this way or another way ?
- Thank you for your help
On:October 12th, 2009 at 9:07 pm*sorry for second post, code disappears when i add it to this text box *
so thats what is confusing me, – what is the code i am meant to be putting into the html doc.
It has this in it already ….
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
it still does not appear to work.
Am i meant to be adding them this way or another way ?
- Thank you for your help
On:October 12th, 2009 at 9:09 pmYour only adding a small snippet of the code needed to actuvate LB from Flash, but your not actually loading any of the LB files in the HEAD of your document.
Myles´s last blog ..Cash Flow Liens – XSP (XSitePro) to WordPress
Your only adding a small snippet of the code needed to actuvate LB from Flash, but your not actually loading any of the LB files in the HEAD of your document.
On:October 13th, 2009 at 1:15 pmIT WORKED!!! YOUR THE MAN!!!
SO DID ANYONE FIGURE OUT IF THE GALLERY FEATURE IS POSSIBLE OR ALSO VIDEO???
Please hit me up
THANKS SOOO MUCH!!!
On:October 20th, 2009 at 3:12 pmGlad it worked.
On:October 21st, 2009 at 2:14 pmNo, as far as I know the gallery has not been solved.
Video is not possible with LightBox, only ThickBox or one of the other overlay flavours.
Thanks for writing back!
Do you think it is possible to use ThinkBox using the same script you have here?
Or would it be totally different?
On:October 21st, 2009 at 6:29 pmHej again, thanks for replying my message, and i am still trying to fix it. But why doesnt your source file work in PC? The MACOSX file..
On:February 27th, 2010 at 8:20 amThe OSX files are hidden systems files the Mac Archiver throws in there. Delete them and use the files NOT in the OSX folder.
On:February 27th, 2010 at 8:36 amOkey, thanks very much. Now i remembered that my website is in AS2, not AS#.. That’s why it doesnt work..
On:February 28th, 2010 at 3:48 pm