Tuesday, August 28th, 2007

YUI gets a sharp-looking lightbox

Category: Yahoo!

YUI has some really impressive components but one thing that’s been missing is a good lightbox implementation. Cuong over at Code Central has taken on the task of building a lightbox by first showing how easy it is to create one in YUI! and then making it look slick using YUI 2.3.0’s eye candy skin.

The lightbox incorporated many new features, along with old features such as drop and drag, it has an image preloader, it can scale large images to fit the window, it has a maximum button that allows you to inflate scaled images. You can even double click on the title bar to switch between maximized and scaled mode (for images that are larger than browser’s window area). You can also hide the lightbox conveniently by clicking on the image.

The implementation of it seems easy enough and it looks like a good fit for YUI developers looking for a dynamic gallery.

Posted by Rey Bango at 8:30 am
9 Comments

+++--
3.9 rating from 40 votes

9 Comments »

Comments feed TrackBack URI

Resizes the viewport to some huge dimensions … nice but with some work to do yet

Comment by cocotapioca — August 28, 2007

YUI Lightbox looks nice!
I made a Lightbox technique using only CSS to make the effect and a little unobtrusive JavaScript to change some CSS properties (I don’t know another way to do it).
I think YUI is very good to create UI design, but it works very slow in Linux browsers (I tested just Firefox and Konqueror).

Comment by Cadu de Castro Alves — August 28, 2007

I’ve been using Awesomebox for a while now as a YUI-based lightbox, so there certainly have been others in the wild for a long time.

Awesomebox is more of the classic lightbox we’re all used to, while this one seems to be a little lighter, effect-wise. Still, it’s good to have a choice.

Comment by Adam McIntyre — August 28, 2007

@Adam: Thanks for pointing it out. I’ll jot it for a future post. :)

Comment by Rey Bango — August 28, 2007

When dragging the “lightbox” outside of the window’s view, the shadow resizes nicely, but when it is brought back to the window’s view, the shadow stays the larger size.

Other than that it looks nice, like any other lightbox.

Comment by emehrkay — August 28, 2007

like cocotapioca already stated: it rezises the page extremely. Like the image itself is small, but the page around it still grows to the actual imagesize

Comment by DarkRat — August 28, 2007

align the mask bottom right, then there will be no unneeded scrollbars

Comment by Lon — August 28, 2007

Hmm, no gallery (prev/next) support, and no graceful degradation is a deal-breaker for me. Also, this is the most steps I’ve ever seen to create a lightbox, is all YUI like that?

var dataSource = {
image1:{url:"photos/rocks.jpg", title: 'Rocks'},
image2:{url:"http://thecodecentral.com/yui.jpg"}
};

Why not pull the large image from an anchor href as with other lightbox techniques?

…but it works very slow in Linux

The YUI Lightbox is dependent on 3 scripts, requires a four-step process, PLUS does not init itself on document.ready… and still only displays images! Although it is nifty to be able to drag the lightbox I don’t think this code is very functional.

My experience with jQuery (and other) Lightboxen requires me to add a single attribute (class or rel) to an anchor tag, and poof! Magic Lightbox! …Which is why I think they’re so popular.

I propose the term YALT: Yet Another Lightbox Technique. And I don’t know why people keep perpetuating the idea that a lightbox can be made using ONLY CSS. That is actually impossible, and the only people claiming to create CSS Lightboxes should be magicians.

Comment by Charles — August 28, 2007

I’ve hacked ModalBox to use Spry Datasets, far better than all that messy code around each image

Comment by AJAX — January 22, 2008

Leave a comment

You must be logged in to post a comment.