Today I’ve finally finished the Autocomplete Migration Guide, which explains how to migrate from ye olde plugin to the new jQuery UI Autocomplete widget. It covers the various options and their replacements, if any. In a lot of cases, we were able to get rid of the options by providing better defaults or by restructuring the API, with the source option being the most prominent example.

The next major jQuery UI release should include the new Tooltip widget, paving the way to shut down another plugin on this site.

An alternative to Lightbox and its various clones, with the sole purpose of displaying images: One or more thumbnails point at the full resolution image, and instead of displaying that image on a new page, its displayed, above an overlay, on the current page.

When a group of anchors with thumbnails is selected, the user can navigate with mouse and keyboard to rotate through the images.

The result is this:

Demo

There’s another demo showing how the widget can resize images that don’t fit into the browser window, as well as customizing animations.

Worth mentioning about the current implementation:

• A “canvas” element is used to render the shadow. This allows a lot of flexibility in terms of positioning, color and size of the shadow; if a browser doesn’t support canvas (IE without excanvas) the shadow simply isn’t rendered
• You can click anywhere to close the viewer, or press Escape
• Cursor keys, mousewheel as well as mouse navigation buttons (previous/next buttons on some models) can be used to rotate through an image gallery
• By using the mousewheel to rotate images, there is no need to emulate fixed positioning or similar hacks, though you need to include the mousewheel plugin
• When the last image is reached, the first is displayed, and the other way round; that way its more obvious that you reached the end of a gallery (“I’ve seen that one already” instead of “Why isn’t anything happening?”)
• A loading indicator is displayed when loading takes more then 250ms. That way you won’t see it most of the time, just in those cases where you’d otherwise wonder if anything is happening at all
• The jQuery UI “drop’” effect is used by default to rotate images in a gallery, giving the slight illusion of a slide-projector, therefore giving the viewer a more natural/human feel
• Images that are too big are resized to fit into the browser window; that also happens when the browser window is resized while the viewer is open
• The markup is very simply, therefore easy to style: There is one element for the overlay (currently buggy in IE6), one container element containing the canvas-shadow element as well as the actual image (by default styled with 15px rounded white borders)

I’d like to hear your feedback! Post a comment here, send me an email, or participate on the planning wiki page.