mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-22 05:06:09 +03:00
132 lines
4.6 KiB
HTML
132 lines
4.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>OpenSeadragon Layers Demo</title>
|
||
|
|
<script type="text/javascript" src='../../build/openseadragon/openseadragon.js'></script>
|
||
|
|
<script type="text/javascript" src='../lib/jquery-1.9.1.min.js'></script>
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
.openseadragon1 {
|
||
|
|
width: 800px;
|
||
|
|
height: 600px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#availables, #used, #arrows, #left, #updown, #right {
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div>
|
||
|
|
Simple demo page to show an OpenSeadragon viewer with layers.
|
||
|
|
</div>
|
||
|
|
<div id="contentDiv" class="openseadragon1"></div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<div id="availables">
|
||
|
|
Availables layers<br>
|
||
|
|
<select name="layers-availables" size="4" multiple="multiple">
|
||
|
|
<option>A</option>
|
||
|
|
<option>BBlue</option>
|
||
|
|
<option>CCyan</option>
|
||
|
|
<option>DDandelion</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div id="arrows">
|
||
|
|
<div id="left">
|
||
|
|
<button onclick="left();">⇚</button>
|
||
|
|
</div>
|
||
|
|
<div id="updown">
|
||
|
|
<div id="up">
|
||
|
|
<button onclick="up();">⇑</button>
|
||
|
|
</div>
|
||
|
|
<div id="down">
|
||
|
|
<button onclick="down();">⇓</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="right">
|
||
|
|
<button onclick="right();">⇛</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="used">
|
||
|
|
Used layers<br>
|
||
|
|
<select name="layers-used" size="4" multiple="multiple">
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
function right() {
|
||
|
|
var added = $( "#availables select option:selected" ).detach();
|
||
|
|
$( "#used select" ).append( added );
|
||
|
|
$.each( added, function( index, value ) {
|
||
|
|
var layer = value.innerHTML;
|
||
|
|
var options = {
|
||
|
|
tileSource: {
|
||
|
|
type: 'legacy-image-pyramid',
|
||
|
|
levels: [ {
|
||
|
|
url: "../data/" + layer + ".png",
|
||
|
|
width: 1000,
|
||
|
|
height: 1000
|
||
|
|
} ]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
var addLayerHandler = function( event ) {
|
||
|
|
if ( event.options === options ) {
|
||
|
|
viewer.removeHandler( "add-layer", addLayerHandler );
|
||
|
|
layers[layer] = event.drawer;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
viewer.addHandler( "add-layer", addLayerHandler );
|
||
|
|
viewer.addLayer( options );
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
|
||
|
|
function left() {
|
||
|
|
var removed = $( "#used select option:selected" ).detach();
|
||
|
|
$( "#availables select" ).append( removed );
|
||
|
|
$.each( removed, function( index, value ) {
|
||
|
|
var layer = value.innerHTML;
|
||
|
|
viewer.removeLayer( layers[layer] );
|
||
|
|
delete layers[layer];
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
|
||
|
|
function up() {
|
||
|
|
$.each( $( "#used select option:selected" ), function( index, value ) {
|
||
|
|
$( value ).prev( "option" ).insertAfter( value );
|
||
|
|
} );
|
||
|
|
updateOrder();
|
||
|
|
}
|
||
|
|
|
||
|
|
function down() {
|
||
|
|
$.each( $( "#used select option:selected" ).get().reverse(),
|
||
|
|
function( index, value ) {
|
||
|
|
$( value ).next( "option" ).insertBefore( value );
|
||
|
|
} );
|
||
|
|
updateOrder();
|
||
|
|
}
|
||
|
|
|
||
|
|
function updateOrder() {
|
||
|
|
$.each( $( "#used select option" ), function( index, value ) {
|
||
|
|
var layer = value.innerHTML;
|
||
|
|
viewer.setLayerLevel( layers[layer], index + 1 );
|
||
|
|
} );
|
||
|
|
}
|
||
|
|
|
||
|
|
var viewer = OpenSeadragon( {
|
||
|
|
id: "contentDiv",
|
||
|
|
prefixUrl: "../../build/openseadragon/images/",
|
||
|
|
tileSources: "../data/testpattern.dzi",
|
||
|
|
showNavigator: true
|
||
|
|
} );
|
||
|
|
|
||
|
|
var layers = { };
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|