mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 21:26:10 +03:00
178 lines
6.0 KiB
HTML
178 lines
6.0 KiB
HTML
<h2>example: tilesource reference strip</h2>
|
|
|
|
<div class="description">
|
|
<p>
|
|
An image reference strip allows the user to quickly preview and navigate a
|
|
sequence of images.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demoarea">
|
|
<div class="demoheading">
|
|
Horizontal Scrolling Image Reference Strip
|
|
</div>
|
|
<div id="contentDiv"
|
|
class="openseadragon"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
OpenSeadragon({
|
|
id: "contentDiv",
|
|
prefixUrl: "/openseadragon",
|
|
showReferenceStrip: true,
|
|
tileSources: [{
|
|
type: 'legacy-image-pyramid',
|
|
levels:[{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
|
|
height: 889,
|
|
width: 600
|
|
},{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
|
|
height: 2201,
|
|
width: 1485
|
|
},{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
|
|
height: 4402,
|
|
width: 2970
|
|
|
|
}]
|
|
},{
|
|
type: 'legacy-image-pyramid',
|
|
levels:[{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801t.gif',
|
|
height: 150,
|
|
width: 116
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
|
|
height: 400,
|
|
width: 310
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
|
|
height: 860,
|
|
width: 667
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
|
|
height: 1650,
|
|
width: 1279
|
|
|
|
}],
|
|
},
|
|
"/openseadragon/examples/images/highsmith/highsmith.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<p>
|
|
The relevant configuration options are shown below.
|
|
</p>
|
|
|
|
<pre>
|
|
OpenSeadragon({
|
|
...
|
|
showReferenceStrip: true,
|
|
...
|
|
});
|
|
</pre>
|
|
|
|
<h2>example: vertical scrolling</h2>
|
|
|
|
<div class="description">
|
|
<p>
|
|
This example demonstrates the configuration options which enable a vertical
|
|
scrolling image reference strip.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="demoarea">
|
|
<div class="demoheading">
|
|
Vertical Scrolling Image Reference Strip
|
|
</div>
|
|
<div id="toolbarDiv" class="toolbar">
|
|
</div>
|
|
<div id="contentDiv2" class="openseadragon"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
OpenSeadragon({
|
|
id: "contentDiv2",
|
|
prefixUrl: "/openseadragon",
|
|
toolbar: "toolbarDiv",
|
|
springStiffness: 10,
|
|
showReferenceStrip: true,
|
|
autoHideControls: false,
|
|
referenceStripScroll: 'vertical',
|
|
tileSources: [{
|
|
type: 'legacy-image-pyramid',
|
|
levels:[{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
|
|
height: 889,
|
|
width: 600
|
|
},{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
|
|
height: 2201,
|
|
width: 1485
|
|
},{
|
|
url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
|
|
height: 4402,
|
|
width: 2970
|
|
|
|
}]
|
|
},{
|
|
type: 'legacy-image-pyramid',
|
|
levels:[{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801t.gif',
|
|
height: 150,
|
|
width: 116
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801q.jpg',
|
|
height: 400,
|
|
width: 310
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801r.jpg',
|
|
height: 860,
|
|
width: 667
|
|
},{
|
|
url: '/openseadragon/examples/images/rpbaasm/0900/0908/090801v.jpg',
|
|
height: 1650,
|
|
width: 1279
|
|
|
|
}],
|
|
},
|
|
"/openseadragon/examples/images/highsmith/highsmith.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05961.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05962.dzi",
|
|
"/openseadragon/examples/images/pnp/ppmsca/05900/05954/05963.dzi"
|
|
]
|
|
});
|
|
</script>
|
|
|
|
<p>
|
|
The relevant configuration options are shown below.
|
|
</p>
|
|
|
|
<pre>
|
|
OpenSeadragon({
|
|
...
|
|
showReferenceStrip: true,
|
|
referenceStripScroll: 'vertical',
|
|
...
|
|
});
|
|
</pre> |