Wednesday, February 8th, 2006

Modal Dialog: Lightbox Goes Wild

Category: Library, Prototype, UI

Chris Campbell has written up a detailed look into an alternative implementation of Lightbox (which we linked to awhile back).

The entry goes into detail on the CSS and JavaScript required to build the modal dialog, and it uses Prototype.

Brian Shih integrated Scriptaculous effects, which makes it look very Apple-ish. You can check out an example by clicking on the image in this post

Lightbox Gone Wild

Update: Moo.fx, not Scriptactulous, was used for the effects.

Posted by Dion Almaer at 8:36 am
19 Comments

+++--
3.7 rating from 101 votes

19 Comments »

Comments feed TrackBack URI

This, nor dojo’s dialog from the previous comment, is neither pretty, nor apply-ish, nor modal.

They are not pretty because, oh well, they’re kind of ugly.
They are not modal because you can tab outside them and interact with the page on the background.

And the demo linked from the article is typical in that it immediately spawns a couple of javascript errors…

The state of Ajax?

Comment by Lon — February 8, 2006

try clicking on the background page and start tabbing then…

about uglyness: have you taken a look at it in IE? About 90% of the browser population… There’s a dashed line running right through the title… There is no padding at all for the main text… The buttons are scattered across the dialog… the field-labels aren’t nicely vertical aligned… Try clicking OK without filling any field and look at the result: it’ll hurt your eyes. The tab order of the buttons is wrong… Need I go on?

No one in their right mind would call this pretty, nor good… It’sall so… mediocre and hyped… There is no one paying attention to the details. Everything about it smells like technicians thinking they know what’s good looking.

Comment by Lon — February 8, 2006

It’s as goodlooking as Sugar Lee Hooper in a thong, and its modality is as meager as I would expect it to be, from a site that gets credited on Ajaxian and has the same horde of lemmings drooling in ignorance over its lack of sanity.

Comment by Martin — February 8, 2006

[…] Modal Dialog: Lightbox Goes Wild: […]

Pingback by Modal Dialog: Lightbox Goes Wild — Sam’s random musings Archive — February 8, 2006

While I disagree with Martin’s attitude, I will agree that this can in no way be considered modal. In FF, I can click on the background, hit TAB once and then hit ENTER and the next link opens up.

=C=

Comment by Cal Evans — February 8, 2006

Actually i am also making a modal-ish thing based upon subModal (google!). I am also implementing it using prototype and i am about 50% ready with it.

However, i am not going to create a box (at first) but i am going to create a slide-in (just as you can see at the bottom of the screen in the fluxiom movie). I’m thinking about the prototyping of it so you could either create a box or create a slider, just like i did. But for now, i am concentrating on the slider, so i get all functionality right first. :0

All required divs are created in the initialization of the subModal class and you will not be able to tab out of it (in any modern browser that is). I am going to use it for the backend i am writing.

Comment by Gilles — February 8, 2006

The posts from Martin and Lon (possibly the same person?) are pretty funny for sheer flameyness. They do have one good point though, it’s not entirely modal, but about as good as we can get for a browser. I SUPPOSE you could write an additional script to keep the focus on the lightbox element while it was open, but I don’t feel like there’d be much of a point.

Also Lon, I’d like to know what browser you are seeing JS errors in? I’ve tested our version in the big 2 (IE and FF) and seen nothing… Since over 75% of our site’s traffic is from these 2 browsers alone, I haven’t bothered with anything else yet.

I’m the one who implemented the Lightbox with animations on alwaysBETA. The effects library used is actually Moo.FX, not Scriptaculous. I much prefer the Moo.FX library because it is really lightweight (3Kb for the base package). It only has 3 basic effects, but they can be combined as needed for pretty much all the effects you could ever want (with the possible exception of color fade).

Comment by Sean McBride — February 8, 2006

“SUPPOSE you could write an additional script to keep the focus on the lightbox element while it was open, but I don’t feel like there’d be much of a point.”

This might not be important here, but the world does need a functional modal cross-browser dialog, the closer to true modality the better. It seems like between catching focus changes and watching key events it should be possible?

Comment by Sam Foster — February 8, 2006

I’m not Martin and I disagree with his ‘over-enthousiastic’ attitude.
The errors I got are on the page that is behind the image (http://particletree.com/features/lightbox-gone-wild/)
These errors are:

Line: 2
Error: ‘dynamicLayout’ is undefined

and

Line: 295
Error: ‘addEventListener’ is null or not an object

And how hard is it to keep focus in your modal dialog? not hard at all! just catch click and keydown on the document level. Cancel if you dislike any of them.

My point now and in all my previous posts is that everyone is claiming all kinds of ajax stuff and this and other sites are hailing every little ajax widget. But if you look at the quality and esthetics of every single one of them you are bound to get disappointed.
No one is served with bad examples. Let’s tell everyone the truth. Most stuff stinks. Let us praise the good stuff and let us try and improve the rest.

Comment by Lon — February 8, 2006

@ Lon: Sorry for the accusation. I just thought the tone sounded similar. I misunderstood your intent eariler. I thought you were saying, “most AJAX/JS stuff sucks so why even try” when you were (I think) actually saying “most AJAX/JS stuff is rough around the edges and we should work on improving it.” I totally agree with the second one.

@ Sam: Yes, I agree that it is important to build towards robust AJAX/JS solutions to common interface elements. However, for the purposes of site-building, the author is often in “good enough to work for me” mode, not “build an extensible class for everyone” mode. But I do think that generic, robust tools are important. I’m currently working on an open source JS library for pagination. I’ll be releasing it sometime this weekend.

Comment by Sean McBride — February 8, 2006

Hi all
@the script authors: first, the effect on http://www.alwaysbeta.com/2006/01/30/first-post/ is really nice and captures that apple feel perfectly. The problem is I’ve sat here with 3 other people a few hours now and we can’t replicate the effect. Javascript and validation errors aside (not that important at the moment) it would be more than helpful if you guys could package up a second zip file that demonstrates the effect so that more people could play around with the code.

I’ve even tried all of the blog replies / demo pages but no one seems to have been able to get the moofx to work right. One person used the lightbox_plus.js to make the loading animation play (something I tried with rel=”lightbox” to no avail)

Any help is appreciated.

greetings from europe,

Alex

Comment by Alexander Werner — February 8, 2006

Hi Sean,

my comments are a little rough around the edges as well. I guess I’m a passionate guy? So, no harm intended and certainly no harm perceived (by me).
I’ll try and polish my temper. It’s more productive. Although maybe slightly less fun.

Comment by Lon — February 8, 2006

There is a firefox bug here! It’s one I’ve been getting in my own applications, I thought I was going mad but now I’m not the only one to trigger it.

Using FF 1.5.0.1 (Win XP) when you open the example form “window”, then click in the fields, THERE IS NO BLINKING CURSOR.

This is about the biggest usability issue ever – I’ve had clients tell me their computer / the software is broken, because they can’t type – when actually they can, they just can’t see the cursor.

So now that there’s a publicly available case where the bug is triggered – has anyone else encountered it? Are there any known workarounds? It’s got me totally stumped.

Comment by Jed Watson — February 8, 2006

Jed, I have read about this bug before related to the Dojo Toolkit’s rich text editor.

Not sure about a workaround though…

Comment by Alex Pooley — February 8, 2006

[…] Ajaxian writes not once but twice about it. […]

Pingback by diatribe » Blog Archive » Of Interest v060208.1 — February 9, 2006

[…] Sean McBride at alwasybeta has a detailed entry describing their modification of the lightbox.js tool we covered earlier. For use at alwaysbeta, Sean integrated moo.fx, added a close button, did some general code cleanup, and added an attractive Apple-like spinner graphic for the loading image. […]

Pingback by Ajaxian » Lightbox.js with moo.fx — February 19, 2006

[…] The effects are nicely done, and look very similiar to what the guys at alwaysBeta did with it, with the spinning progress indicator. There is also the large close box in the lower right corner, but I’m curious as to why its not in the upper right corner to remain consistent with standard GUI conventions. […]

Pingback by Ajaxian » Lightbox v2.0 released — March 29, 2006

Jed,

I noticed the invisible caret bug too. Turns out this is a mozilla error. Its been fixed, and will be resolved in their next releae. But I’d love to find a workaround for people not using the up-to-the-minute latest build of mozilla. Any ideas?

http://www.squarefree.com/burningedge/2006/04/21/2006-04-21-trunk-builds/

thanks,

maulin

Comment by Maulin — May 11, 2006

Check dojo dialog box

http://www.jyog.com

Comment by dojo — April 23, 2007

Leave a comment

You must be logged in to post a comment.