In this example, the Uize.Widget.CollectionItem.Zooming widget class is being used to add a JavaScript animation zoom in effect to an image. If you mouseover the big image below and rest the mouse, the zoom in behavior will be activated. Once zoomed in, moving the mouse lets you pan up and down and left and right inside the view port in order to see all parts of the image.

In contrast to the Zooming Collection Items example, which simply demonstrates this widget applied across multiple images in a grid, this example demonstrates how the value of a single instance's previewUrl state property can be changed dynamically, and how the zoom and pan behavior still works as expected after the image URL has been updated. To test this, click on one of the small thumbnails in the strip above the main image. After selecting a new image, mouseover the main image and activate the zoom and pan behavior.