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, 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.

DaThumb.addEventListener(MouseEvent.CLICK,da_thumb);
function da_thumb(event:MouseEvent):void {
	trace("test");
	ExternalInterface.call("Design_Gallery", "your/image/link.jpg", "Membership Card");
}
  • DaThumb – Instance name of our button
  • da_thumb – Unique event name for our custom action.
  • Design_Gallery – Our Function.
  • your/image/link.jpg – Link to the full size image on your server.
  • Design Gallery – Title of the image (still trying to get this to work).
  • 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 and JavaScript calls to our LightBox files.

    
    	
    	
    	

    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.

    
    

    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.

    95 thoughts on “Lightbox2 & Flash AS3 Redux

    1. rio says:

      This is easy to understand. Now, i can get it work fine.
      Thanks for your help.

      rio

    2. Slake says:

      For 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.

    3. Slake says:

      http://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.

    4. Slake says:

      And apparently my flash isnt even loading in IE now.. sigh. I’ll see if I can fix that.

    5. MrMyles says:

      @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.

    6. Slake says:

      Okay, 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

    7. Winnipeg Web Design says:

      @Slake: Glad to help. Centering is not working because of your styles.
      You have

      	background-position: top;
      	margin-top;
          margin-left: 0px;
      	margin: 0px;
      

      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

    8. Slake says:

      Everything is now working great, thank you SO much! Great work.

    9. Slake says:

      Hi, 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.

    10. MrMyles says:

      @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.

    11. "Yeti" says:

      @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

    12. "Yeti" says:

      @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

    13. "Yeti" says:

      @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

    14. MrMyles says:

      @“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.

    15. "Yeti" says:

      @MrMyles: I apologize for the double post earlier.

      Well, the fla 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.

    16. Slake says:

      Hello 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,
      Slake

    17. MrMyles says:

      @Slake: Nice site Slake. Now that you mention it, yeah the overlay is not transparent. Hmmmm, wonder why?

    18. MrMyles says:

      @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.

    19. President says:

      THX, 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

    20. MrMyles says:

      @President: I use relative, but no reason direct would not work. Just make sure the image is where you say it is in Flash.

    21. Slake says:

      Hey 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

    22. christina says:

      Thank 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!

    23. MrMyles says:

      Hi Christina
      The blue background can be changed in the CSS 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

    24. Michael says:

      Re: The blue color

      Go to the lightbox.css file (css -> 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.

    25. MrMyles says:

      Thanks.

      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.

    26. Michael says:

      Actually 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.

    27. Nirali says:

      Great 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

    28. MrMyles says:

      Thanks. Please do let me know how XML loading goes. Certainly would be a good idea to do that to ease site updates.

      Myles

    29. Nirali says:

      Hi 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:)…

    30. Nirali says:

      I 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??

    31. MrMyles says:

      Hi 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?

    32. Jarno says:

      Hi,

      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?

    33. Jarno says:

      o, i found out that when i upload the files that is does work. Why isn’t it working on my hard disk?

    34. MrMyles says:

      @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
      .-= MrMyles´s last blog ..Cash Flow Liens – XSP to WordPress =-.

    35. Âvalanche says:

      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.
      Âvalanche

    36. MrMyles says:

      @Â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.

    37. Âvalanche says:

      HI 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
      Âvalanche

    38. Âvalanche says:

      Here what the .xml looks like:

      …P.S….”Im not sure why this didn’t post with the other codes”

      Âvalanche

    39. MrMyles says:

      @Â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.

    40. MrMyles says:

      @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:

      
      	
      	
      	
      
      
    41. bunnyface says:

      Hey MrMyles,
      Thanks 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 !

    42. bunnyface says:

      – 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. 🙁

    43. Myles says:

      You 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.
      .-= Myles´s last blog ..Cash Flow Liens – XSP to WordPress =-.

    44. bunnyface says:

      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. 🙂

    45. bunnyface says:

      ok 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. 🙁

    46. bunnyface says:

      and 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 ..

    47. bunnyface says:

      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?

    48. MrMyles says:

      Yes, 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.

      var fileLoadingImage = "images/loading.gif";		
      var fileBottomNavCloseImage = "images/close.gif";
      

      and

      
      
      
    49. bunnyface says:

      ooooh i get it now – thank you soo much for taking the time to help with this ! ! this is the best thing ever !

    50. bunnyface says:

      … .. * blush* one last question… is there any possible way to do this in AS2. It looks like me and AS3- are not good friends.

    51. bunnyface says:

      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

    52. bunnyface says:

      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 🙂

    53. bunnyface says:

      *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 🙂

    54. bunnyface says:

      *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 🙂

    55. Myles says:

      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.

      
      	
      	
      	
      	
      
      

      .-= Myles´s last blog ..Cash Flow Liens – XSP 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.

    56. Ernie says:

      IT 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!!!

    57. MrMyles says:

      Glad it worked.
      No, 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.

    58. Ernie says:

      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?

    59. Essan says:

      Hej 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..

    60. MrMyles says:

      The OSX files are hidden systems files the Mac Archiver throws in there. Delete them and use the files NOT in the OSX folder.

    61. Essan says:

      Okey, thanks very much. Now i remembered that my website is in AS2, not AS#.. That’s why it doesnt work..

    62. Karim says:

      Hi MrMyles it worked but i wanna know how can i add more images:

      ExternalInterface.call(“Design_Gallery”, “images/image-1.jpg”, “Picture 1”);

      I want more then one:D

      Thanks ALLOTTT!!!

    63. MrMyles says:

      As do I. I would love to get the gallery function working, but nothing I tried works with galleries. Just single images.

    64. Karim says:

      whaha I thought you would not respond because of the time went by, i also have the transparacy problem and can’t get it to work:( i will post the galery problem on FlashFocus maybe they know the answer.

      Thanks alott also for the quick responding.

    65. MrMyles says:

      If you can use AS2, it will work.
      If you find a solution to do the gallery in AS3, please post back here as I would love to know.

    66. Karim says:

      but i build the whole site in AS3, is it then still possible?

    67. MrMyles says:

      Like I said before, I cannot get the gallery function to work in AS3. It might be possible, but I have yet to do it. If you do find a solution though, I would be interested in knowing what it is.

    68. Karim says:

      No i mean i build the website in as3 is it possible to make a as2 script in as3? and i will post the answer if i know it offcourse:D

    69. MrMyles says:

      No. If you are using AS3, you need to use AS3 scripts. If you are building a full site in Flash, you should have single files for each “page”. So each page has it’s own Flash file. Then on your gallery page, use AS2 instead of AS3 (unless you need AS3).

      If everything your doing requires AS3, then you cannot use AS2 scripts. Need to stick with one.

    70. Karim says:

      Yes everything is in as3 so i wanna stick with that i posted on two forums the question about the gallery, now just hope!

    71. David Puerto says:

      I am using this code in my portfolio. I am executing the Lightbox from Piecemaker2 and it’s AS3, it was simple to implement and write the function for the AS3 in piecemaker but I’m having trouble launching the image. I know it has to do with the path… I think because of the caption piece… I tried to remove it but Idk what’s the deal. If anyone would like to work with me on developing a solution for this to work with the XML and gallery please email me.

    72. MrMyles says:

      Hey David.

      Cool site. Like the Flash banner. Is that where you are using LightBox? If so, looks like it works, but I see nowhere you need a gallery.
      I have never heard of Piecemaker2.

    73. canaan77 says:

      Hi guys!

      I have followed the guide and I think the most of it is working now:).

      When I finally insert my swf file (the buttonthumbnails made in Flash that will open Lightbox) in Dreamweaver and click on the thumbnail the Lightbox viewer pops up.
      So far so good. But at the end of the guide I am told to locate (or add) the wmode and script access tag in my RunContent JavaScript.
      The problem is that I don’t get this Runcontent Javascript in my html code when i insert the swf file.

      So I can’t find the ‘allowScriptAccess’,’sameDomain’ anywhere.

      Maybe I’m doing something wrong? Probably, because I’m a novice at Flash:O.

      So how and where should I add the wmode and script access tag when I don’t get this RunContent Javascript?

      Maybe I’m doing something wrong when it comes to the swf file?
      Maybe I’m not supposed to just drag it into the index.html (body tag in Dreamweaver)?
      But if not, how can I link to my swf file?

      This is the code after I have inserted my swf file in the body tag:


      <!–

      Content on this page requires a newer version of Adobe Flash Player.

      <!–

      I would be very grateful for some help:).

      /canaan77

    74. canaan77 says:

      Ooops…it seem that my code in my last message disappeared.
      One more try.

      This is the code after I have inserted my swf file in the body tag:


      <!–

      Content on this page requires a newer version of Adobe Flash Player.

      <!–

      I would be very grateful for some help:).

      /canaan77

    75. MrMyles says:

      @canaan77 Can you post a link to the site? I have never dragged and dropped anything into DreamWeaver. I always copy and paste the code into the Source pane.

      To post your code here, wrap it in code tags your code here

    76. canaan77 says:

      Hello again!

      I’m making the site for a friend and I’m sorry but he hasn’t uploaded it yet.
      (I’m working with the site locally).
      He’s on vacation for some weeks so I’m afraid he can’t help me to upload it.
      But I will follow your recommendation and post the code into the code tags.
      Hope it works:).

      This is the code after I have inserted my swf file in the body tag:


      <!--

      Content on this page requires a newer version of Adobe Flash Player.

      <!--

      The code below is also added when I have inserted my swf file:

      Thanks in advance

      /canaan77

    77. MrMyles says:

      @canaan77 without seeing you site, I cannot offer much help. Do you not have a test server? Maybe email me the files so I can see them?

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.