mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 21:26:10 +03:00
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<h2>example: toolbar</h2>
|
|
|
|
<div class="description">
|
|
<p>
|
|
Although OpenSeadragon provides default buttons which are overlayed on the Viewport,
|
|
there are many use cases where the presentation may require a more traditional
|
|
'toolbar'. OpenSeadragon now allows you to very simply dock your controls
|
|
inside any element on the page which the end user has presentation control over.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demoarea">
|
|
<div class="demoheading">
|
|
Toolbar
|
|
</div>
|
|
<div id="toolbarDiv" class="toolbar">
|
|
<span style='float:right;margin:10px 20px 0 0'>
|
|
| <a href="#">other tools</a>
|
|
| <a href="#">other tools</a>
|
|
</span>
|
|
</div>
|
|
<div id="contentDiv" class="openseadragon"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "/openseadragon",
|
|
tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
|
|
toolbar: "toolbarDiv",
|
|
showNavigator: true
|
|
});
|
|
</script>
|
|
|
|
<p>
|
|
Most importantly the toolbar has additional logic which supports transitions between
|
|
fullpage and normal mode. The user can style, including hiding, the toolbar in fullpage
|
|
mode, even though its not otherwise related to the viewer / viewport DOM.
|
|
</p> |