example: viewport navigator

A viewport navigator allows the user to see the source image displayed as a reference image with a highlighted area showing which portion of the image they are currently viewing in the viewport. The navigator reuses the image sources provided by the viewport so no additional image derivatives are required.

Viewport Navigator

(The viewport navigator is up for promotion as a default interface element for accessibility reasons but could be disabled if required.)

Mouse interactions scroll (zoom) and drag are now supported on the navigator! (New since 0.9.40)

The viewport navigator is now keyboard acessible! Just tab into it, the highlight will change to blue-ish, and you can use the following keys:

[ w, up arrow ] - move viewport up
[ s, down arrow ] - move viewport down
[ a, left arrow ] - move viewport left
[ f, right arrow ] - move viewport right
[ 0 ] - zoom / move viewport home
[ - / _, shift+W, shift+up arrow ] - zoom viewport out
[ = / +, shift+S, shift+down arrow ] - zoom viewport in

* NOTE: Chrome and Safari do not support the arrow keys for the Navigator.