JavaScript Zoom Examples
The UIZE JavaScript Framework includes scores of excellent examples to get you started. This index lists 7 JavaScript zoom examples.
TAKE A STEP-BY-STEP TOUR...
You can take a step-by-step tour through the examples listed on this page. When you get into the tour, you can use the tour navigation bar that will appear just under the title bar to navigate through the examples. Use the arrows to go forward or back, or click on a "notch" on the progress bar to jump straight to an example.
Coupled Zooming Collection Items See how two instances of the zooming collection item widget can be coupled together to give you a side-by-side zoomed in comparison of two images. Mag View Experience the image magnifier widget that lets you see a zoomed in version of a highlighted area of an image, with support for multiple zoom levels. Marquee and Image Port See this demo for a drag-and-drop image crop interface, with an enlarged display of the cropped region. Drag to move it, or drag its edges to resize. Uize.Widget.ThumbZoom Astonish users with a slick animated image preview feature where a larger preview zooms out from a grid of thumbnail images. This demo shows you how. Zoom and Pan See how a draggable image port lets you control zoom for an image in a view port by ctrl-clicking and dragging, or pan by just clicking and dragging. Zooming Collection Item with Image Switching See how the zooming collection item widget is used in combination with an image selector strip to provide an interface for previewing multiple images. Zooming Collection Items Experience the zooming collection item widget. It gives you a lightweight and intuitive preview behavior, with a JavaScript animation zoom-in effect.