Shadowbox 1.0 released
21 Feb 2008 | tags: JavaScript, Projects, Shadowbox | 34 Comments »
This morning, I released version 1.0 of Shadowbox. In its first month, the beta was downloaded over 15,000 times! I really appreciate the amount of interest the JavaScript community has shown in this project. I’m working hard to make sure that it’s a quality piece of code, and I hope you enjoy it. The 1.0 version includes the following feature enhancements over the previous betas:
- Extensive and fully documented JavaScript API
- Compatibility with the original Lightbox HTML markup
- Support for image maps
- Numerous other options and bug fixes
If you have any questions about how to use Shadowbox for your project, please ask them in the support forum.
More information here.
Michael, congratulations on the 1.0 release! Shadowbox is a fantastic piece of work. The tip is in the jar. ;-)
Michael, a note on the documentation. Filed under Support > Adapters, you have:
MooTools (requires Fx.Styles and its dependancies)
Should read:
MooTools (requires Fx.Styles, Window.DomReady and their dependancies)
Without also including Window.DomReady in the download, Shadowbox fails under MooTools.
@theturninggate: good point about the MooTools dependancies. The actual dependency is on the Element.Events file. And thanks for the tip! I wish I had a nickel for everybody who has downloaded this thing…i could get a new MacBook! ;)
hey man, thank you very much for this masterpiece of code =)…used lytebox until I found your shadowbox through the Yaelle Blog today…absolutly crazy piece of js! Nice Stuff & no offense to the other coders (i.e. lightbox, lytebox usw.), they also did great work but yours fits my needs the best =)…have a nice evening! greez
ah sorry, just thought not far enough before =)…can shadowbox display PDFs directly in the overlay window?
@luk: I have not yet found any way to reliably detect browser PDF support. There have been reports of others getting it to work with PDF’s, but these were apparently reported by individuals with browsers that have some sort of PDF plugin.
LightWindow is able to open pdfs, so i thought (i.e. u were inspired by lightwindow) shadowbox can do it too =)…do you think it would be complicated to add this to shadowbox? thx 4 the fast answer.
@luk: You’re mistaken…LightWindow can’t open PDF’s. The example on the LightWindow demo page is a product called Flash Paper. It’s basically a PDF embedded in a swf file (Flash) which is fully supported by Shadowbox.
It can Display pdf’s! Add this to the js file or as setup option:
iframe: [..., 'pdf']Tested with IE 7 and FF 2… it works fine!@Bastian: You make me feel like I am talking to a wall. ;) I’m looking out for your users. Just because it works on YOUR computer doesn’t mean it will work on theirs. My version of Firefox, for example, doesn’t open PDF’s.
I have found a nice workaround by using IPaper from scribd.com to convert my documents/PDFs to Flash. Works fantastic (and you can set other nice options also make private, don’t print etc etc)
Regards Kb
hey guys =)…thank ya all for your hints & tipps and explanations (mjijackson…u re right with the “Flash Paper”…I was really mistakeng)…the problem is not that big, its just one external site I link to (btw. open it with shadowbox) and there are PDF’s with target attribute “parent”, means they open in the same page (but I think I dont have to say that =D) so shadowbox, lytebox, lightwindow, whatever can’t open it directly in the overlay window…the other pages redirect either directly to the download dialog or have a target attribute “blank” and then it’s no problem^^…just a detail =)…thx anyways for your answers!
best regards,
luk
ok, today I tried to implement your shadowbox to my site, everything is like on yours (check it out http://www.uni.031.be/ …you have to scroll down in the source code because first there is a php script…) but it’s not working…it opens the links in parent window^^ and the title attribute content is showed when I roll over the table cells…the only thing which is different to yours is, that the links are in table cells i.e.
td class=”Stil1″> a href=”…url…” rel=”shadowbox” title=”…titletext…”>LINK TEXT /a> /td>
yours are in
p> a rel=”shadowbox” class=”option” title=”This page” href=”index.html”>This page /a> /p>
and the order of the link attributes i.e. href, rel, title are not in the same order as yours (but when this is a problem I stop doin’ things on the web =P)
I used lytebox before and it worked and sure I could switch back, but I dont want to switch back because your shadowbox is the most advanced “Box” I know until now =)…so I hope you or somebody else can see my mistake…I wasn’t able to^^…
thx!
greez, luk
@luk: Two things wrong with your code:
onloadmethod is missing a closing}.In the future, would you please post these kinds of issues in the forums? I’m trying to keep the threads on the blog on topic. Thanks.
Hi mjijackson and congratulations !
I wanted to use your script in my new website but i develloped it yet with the Adobe’s Spry framework.
But i saw ur script works with about all over javascript framework except Spry. If it can, can you tell me how ?
Thx for ur answer. Sof from France !
hello,
i used your script, everyhting is fine on mac, but i’ve two problemns on windows: IE7 can’t load youtube (other video format OK) and FF make a strange distorsion effect when opening the shadowbox. congratulations ! and thank you for answer me…
@Sof: I’ve never used Spry, but if you’d like to create an adapter I’d be glad to include it in the distribution.
@pipolito: I’ve tested all of the demos (including YouTube) in IE7 on Windows XP without a hitch.
Michael, just a quick note to let you know that your work is really appreciated. Shadowbox kicks some serious butt. There’s just a small point of critique: the opening effect is not so smooth in firefox, maybe you could provide some alternatives for that? But besides that: I’m loving this little gem! I’m planning on using it in one of my projects and will drop some cash in the jar by then!
@robin303: Thanks for the compliment. ;) What animation are you referring to? The resizing animation or opacity animation (for the overlay)?
Well most of all I’m referring to the background opacity changing effect. It looks lovely in Safari but kind of laggy in Firefox. Now I know that Firefox is not the greatest star in opacity effects but maybe there some clever way of making the transition smoother. Another idea would be to give us the option to pick a different effect for making the background overlay come in. Maybe let it come sliding in horizontally or vertically? A moving div should work better than the cpu-intensive opacity fade. Something else I learnt is that using a tranparent png image seems to be somewhat better for performance than using a div with opacity set < 1. Anyways, I’m already in love with the way you programmed this thing, very clever - especially the whole skinning concept. So simple yet so tweakable. Keep up the good work :-)
Perfect!! The best “lightbox” ever made using jQuery… Congratulations and thanks you!
Hai-
Nice Job! I am really wowed that someone kicked out a library on the same level as LightWindow, honeslty its what I was hoping for. Keep up the great work!
Kevin aka stickmanlabs
Hi Michael, your shadowbox is superb but I have one question. It is possible to attach google-analitycis statystic to zoomed picture. I mean that every time somebody choose to see galery and skip from one picture to another it will count as different pageviev.
@robin303: The animations will be a lot smoother across all frameworks in the next release. I promise. ;)
@Kevin: Thanks very much. I wouldn’t have even thought to do it if I hadn’t seen yours first.
@Reign: I don’t know. I don’t work with Google analytics. I would think however that it would not be very accurate to count viewing an image as an actual page view. Plus, you would have the slow down of sending that information to the server on every gallery item. I can’t tell you how many times I’m waiting for a slow web page and I look at the status bar and see that it’s waiting for Google Analytics to load…
Hi Miji! Congrats for this good and wonderful shadow box, I am using this shadowbox for my project, the issue i am facing is i want to open the shadow box when a swf file is clicked, for example i placed a object inside the anchor tag , but when i click the object(.swf) it s not showing up the shadow box Please help me out!
Regards
Michael, thanks again. I just dropped 10 bucks in the tipping jar and I hope everyone else who uses this awesome component will as well :-) Looking forward to the next release!
Joomla module created. If you want to extend it, change it…it is a simple version (v.0.1) and it needs big improvement. I ‘m using it and I hope I’ ll extend it.
I ‘ve placed the module at Nabble forum (title: JOOMLA module created)
Sorry… A BIG THANKS for ShadowBox!!
Hiya,
I’ve been trying out Shadowbox on a couple of projects and have noticed a slight irregularity in Firefox. I’m not sure if you’re aware of it, but it’s worth making sure. :)
I’m using it on an image, and when clicked you can see the square that the image will grow from briefly. Once the background fully fades to black it’s not visible, but it’s a very noticeable imperfection.
I’ve managed to snap a screenshot of it:
http://serve.ryanjohnwilliams.com/images/shadowbox_square.jpg
This is Firefox 2.0.0.14 on Windows Vista x64, but I’d assume it affects other versions of the browser/OS too.
Another notable point is that I can manipulate the size of that square by adjusting the initialHeight and initialWidth variables, although setting it to 0 and 0 fails as it seems to have some padding that prohibits it being entirely invisible.
Great work otherwise. :D
Hi Michael Firstly, lovely work and thank you for making this available to use. It’s slick and sophisticated and I love it!
One little problem I’ve come across, and I can see it referenced above, so I must be doing something wrong here. When I try to view your You Tube example clip on IE7, the animation works, but no video loaded. There’s an ‘error on page’ which appears, which I’ve transcribed here:
Line: 1
Char: 1
Error: Object expected Code: 0
URL: http://www.youtube.com/swf/l.swf?
video_id=wbzLpteC8ng&rel=1&eurl=http%
3A//mjijackson.com/shadowbox/&iurl=http%
3A//i.ytimg.com/vi/wbzL.pteC8ng/default.jpg&t=OEgsToPDsklgw3ZsKoCI9zLv168hx80M&autoplay=1
apologies if any typos - IE7 doesn’t allow you to copy and paste the error code, or expand the error window, so had to screen grab a few times and type up.
Any ideas about how I can fix this?
Thanks so much for your time and again, thank you for your you-beaut script.
Gaynor
Michael - thank you for Shadowbox. Like the ninja, it is just awesome! You seem to have thought of nearly everything! As I scrolled down the demos I was like “yeah but can it do this! …oh yes, yes it can… ah ha! but what about this! …oh…wow, yes it can!”
The compatibility checking for the various media types is superb - such a brilliant feature.
Thank you again, very very much.
Keir
hi, thank you for shadowbox. i simple added support for logo, showstop and usefullscreen flashvars of flvplayer. showstop and usefullscreen have reverset default settings.
Hi there, superb job!
Is there the possibility to have shadowbox larger than the viewport ? I need to open a page bigger (longer) then the screen/document and i’d like to have it full-sized, like Lightbox does. Is it possible?
This is awesome!! Is there a way to link the “Title” to a file?