mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 21:26:10 +03:00
51 lines
1.9 KiB
HTML
51 lines
1.9 KiB
HTML
<h2>example: viewport navigator</h2>
|
|
|
|
<div class="description">
|
|
<p>
|
|
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.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demoarea">
|
|
<div class="demoheading">
|
|
Viewport Navigator
|
|
</div>
|
|
<div id="contentDiv" class="openseadragon"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "/openseadragon",
|
|
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
|
showNavigator: true
|
|
});
|
|
</script>
|
|
|
|
<p><em>(The viewport navigator is up for promotion as a default interface
|
|
element for accessibility reasons but could be disabled if required.)</em>
|
|
</p>
|
|
<p>Mouse interactions scroll (zoom) and drag are now supported on
|
|
the navigator!
|
|
(New since 0.9.40)
|
|
</p>
|
|
<p>
|
|
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:
|
|
</p>
|
|
<ul>
|
|
<li><strong>[ w, up arrow ]</strong> - move viewport <strong>up</strong></li>
|
|
<li><strong>[ s, down arrow ]</strong> - move viewport <strong>down</strong></li>
|
|
<li><strong>[ a, left arrow ]</strong> - move viewport <strong>left</strong></li>
|
|
<li><strong>[ f, right arrow ]</strong> - move viewport <strong>right</strong></li>
|
|
<li><strong>[ 0 ]</strong> - zoom / move viewport <strong>home</strong></li>
|
|
<li><strong>[ - / _, shift+W, shift+up arrow ]</strong> - zoom viewport <strong>out</strong></li>
|
|
<li><strong>[ = / +, shift+S, shift+down arrow ]</strong> - zoom viewport <strong>in</strong></li>
|
|
</ul>
|
|
<p>
|
|
<em>* NOTE: Chrome and Safari do not support the arrow keys for the Navigator.</em>
|
|
</p> |