UIZE JavaScript Framework

JAVASCRIPT EXAMPLES Uize.Widget.ThumbZoom

In this example, an instance of the Uize.Widget.ThumbZoom widget class is created and wired up to the thumbnail images on the page. This is done by specifying the thumbnail img nodes through the thumbNodes state property on the Uize.Widget.ThumbZoom instance.

The Uize.Widget.ThumbZoom class wires a lightweight, inline preview behavior to these images. The URL for the larger version of each image is found from the href of the img tag's containing a tag. This provides the benefits of SEO indexing of the large images, as well as a fallback behavior should JavaScript be disabled or some failure occurs (so, a progressive enhancement approach). When you click on a thumbnail, the larger version is loaded and zooms out from the thumbnail using a JavaScript animation effect. Moving the mouse dismisses the large view. This provides a lightweight and easily discoverable and learnable interaction that makes it quick to go from one preview to the next. Additionally, there is some very simple CSS and JavaScript as part of the page wiring that dims the grid when you mouse over it, but for the thumbnail that you mouse over, helping to make the thumbnails "pop".

Braving the Onslaught Companion to a Sunset Concrete Eternity Corrugate It Crank It Up Driving Through the Rain Flock of Clouds Hail to the Opening Heavens Open Over Pedro Hook in the Wall Huddling Together Just a Visitor Out the Bus Window Pacifica Pier From Milagra Pier Before the Storm Rain Fall Retirement Home San Fran Sunset San Mateo Sunset Setting Below Clouds Shadow of the Past Stacks of Steel Sun Sets Soon at Sweeney Sun Through a Tree Sweeney Ridge Sunset Trees Meet Sky Twins Urban Heavens Window Lean Windswept and Alone