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".