SWFbox v1.2
Lightboxes seem to be the current trend. After the success of the original Lightbox many variations and clones have appeared on the Net – and big websites like CNET have adopted them as well, replacing the old and outdated pop-ups with in-page AJAXy pop-ups.
Based on the work done here I created a flash lightbox for the Dreamway website. I needed a lightbox to present flash files that would have variable dimensions and most likely more than one on each page. I couldn’t find a ready-made solution that would suit my needs so I decided to build one from scratch.
What I came up with is the following script, I call SWFbox. At it’s present state it’s pretty basic but it fulfills its purpose nicely. It is independent from other functions but I’m sure it can be connected with an AJAX library (scriptaculous or other) to have more fancy effects like a fade in or a loading screen (maybe I’ll do that in a revised version).
Click here for an online example of the script
To elaborate on some of SWFbox’s features:
- The flash content is centered horizontally and vertically.
- You can click anywhere on the screen to close the pop-up.
- It’s lightweight. The code is simple and tight and includes only what is needed.
- You can have more than one SWFboxes in one web page.
- Easy to implement. You only need to write the code for the link and the pop-up is generated dynamically.
Instructions how to use are available inside the archive (readme.txt).
Consider this script as work in progress and if you have any improvements to make please go ahead.
Version: 1.2
Language: JavaScript
File size: 10,4kb
Last 5 projects by Makis
- Twitter Status v1.0 (with JSON and cURL in PHP) - December 2nd, 2009
- OptusZoo - Restructure - October 20th, 2009
- inSing.com: New website - May 18th, 2009
- Script: Post-load banner ads - May 17th, 2009
- Flash-antics: New website - May 6th, 2009
September 22nd, 2007 at 11:02 pm
Yes, cool script indeed. Thanks a lot.
February 8th, 2008 at 1:29 am
If you use this in a page and close the lightbox by clicking outside of the popup and then scroll the page you get a javascript error.. I assume because the popup had been closed but it is still looking to close something upon page scroll. Is there a fix?
February 8th, 2008 at 7:41 am
Is there a way you can use the code to call up a text file instead?
February 9th, 2008 at 7:42 pm
Hi guys, thanks for your feedback.
BigD, you are right about the bug – I’ve corrected this and will be available on the next release.
For a quick fix, open “swfbox.js” and go to line 55:
window.onscroll = function() { window.onscroll = null; hideSWFbox(swfName); }
replace with:
window.onscroll = function() { window.onscroll = null; if (document.getElementById(swfName)) { hideSWFbox(swfName); } }
Kreuger, theoretically you can use this code as a basis to load up anything in the lightbox but at present its exclusively built around loading an swf file. Open “swfbox.js” and look where it says “SWFbox_content.innerHTML” to see if you can make any modifications that will suit your needs.
April 11th, 2008 at 4:27 pm
Do you really think this is new thing? Your blog is really good to me, I read it to get useful info, but sometimes I’m bored to tears.
May 21st, 2008 at 12:26 am
For me it was very helpful, tnx a lot dude!
June 26th, 2008 at 5:12 pm
[...] Box, Slightbox, Slightly ThickerBox, Slimbox, Smoothbox, SubModal, Suckerfish HoverLightbox Redux, SWFbox, Thickbox, TinyBox, YUI based lightbox [...]
July 13th, 2008 at 9:35 pm
[...] SWFbox [...]
July 14th, 2008 at 7:06 pm
[...] SWFbox [...]
July 16th, 2008 at 12:56 am
What about a swfbox above a flash site?
the opacity doesn’t work for the flash site on the parent page. :s
August 17th, 2008 at 12:15 am
Alain,
In order to have the flash work for the flash you have to set the Wmode paramter in the html that calls the flash (look up Wmode in flash help).
November 19th, 2008 at 10:58 pm
Hello, I think it is useful.
I think this thik must be inplemented with Lightbox 2
March 2nd, 2009 at 8:00 am
commenting usually isnt my thing, but ive spent an hour on the site, so thanks for the info
March 7th, 2009 at 1:56 pm
Wondering how hard it would be to turn off the “hide the swfbox” function and use image button somehow. Since the .swf is loaded via a link to the .swf, a hide function would need to come from the script, maybe using document.write to show this control with CSS positioning of the button.
March 8th, 2009 at 10:41 pm
CodeBits, this script is just the bare bones – you can enrich it with all that functionality which is agreed that it would provide a better user experience.
My aim here is to provide the “vanilla” code, independednt of any other libraries, to use as you please…
July 15th, 2009 at 5:02 am
I don’t care what anybody says. This script is awesome! You did a good job! I know what it’s like to write a script some people talk like it’s so easy and it’s done in a couple days. good job.
Blessings
July 15th, 2009 at 6:43 pm
Thanks Richard, I think in general people are positive about it and ask for additional features.
For many it seems trivial these days to have certain features (like a colse button) but as I’ve been saying this is a barebones script to enhance to your liking.
AND it doesn’t rely on any framework – it’s pure JavaScript code.
September 24th, 2009 at 1:22 pm
[...] Shadow Box Slightbox Slightly ThickerBox Slimbox Smoothbox SubModal Suckerfish HoverLightbox Redux SWFbox Thickbox TinyBox YUI based [...]
March 13th, 2010 at 3:00 am
Hi
can it work from a button made in flash?
March 13th, 2010 at 11:24 am
@IVAN yes, you just need to call the same JavaScript function adding the parameters from within a flash action
May 16th, 2010 at 11:45 pm
[...] SWFbox [...]