mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-25 22:56:11 +03:00
Code Issues Projects Releases Wiki Activity

Adding some demo pages for the nav changes

Browse Source
This commit is contained in:
houseofyin 2013-03-16 21:05:02 -04:00
parent 80ff8f908a
commit 24c82e39b8
3 changed files with 200 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
test/navigatordefaultdemo.html Normal file
View File

@ -0,0 +1,58 @@
<html>
<head>
<title>OpenSeadragon Expose Origina Event Demo</title>
<script type="text/javascript" src='openseadragon/build/openseadragon/openseadragon.js'></script>
<style type="text/css">
.openseadragon
{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
.openseadragon-small
{
width: 40px;
height: 30px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
</style>
</head>
<body>
<div class="demoarea">
<div>
Simple demo page to verify that event handlers pass along the original source event
</div>
<div id="contentDiv" class="openseadragon"></div>
<div id="navigatorDialog">
<div id="navigatorDiv" class="findme"></div>
</div>
</div>
<script type="text/javascript">
var viewer = OpenSeadragon({
id:"contentDiv",
prefixUrl:"openseadragon/build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"example-images/highsmith/highsmith_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"9221",
Width:"7026"
}
}
}
});
</script>
</body>
</html>

93
test/navigatordemo.html
View File

@ -2,11 +2,9 @@
<head>
<title>OpenSeadragon Expose Origina Event Demo</title>
<script type="text/javascript" src='openseadragon/build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js'></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.min.css"/>
<style type="text/css">
.openseadragon
.openseadragon1
{
width: 800px;
height: 600px;
@ -14,35 +12,59 @@
color: #333; /* text color for messages */
background-color: black;
}
.openseadragon-small
.openseadragon2
{
width: 40px;
height: 30px;
width: 500px;
height: 1000px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
.openseadragon3
{
width: 762px;
height: 1000px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
</style>
</head>
<body>
<div class="demoarea">
<div>
Simple demo page to verify that event handlers pass along the original source event
Simple demo page to verify navigator can be placed on an element outside of the main viewer
</div>
<div id="contentDiv" class="openseadragon"></div>
<div id="navigatorDialog">
<div id="navigatorDiv" class="findme"></div>
<div id="contentDiv1" class="openseadragon1"></div>
<div id="navigatorDialog1">
<div id="navigatorDiv1" class="findme"></div>
</div>
<div id="contentDiv2" class="openseadragon2"></div>
<div id="navigatorDialog2">
<div id="navigatorDiv2" class="findme"></div>
</div>
<div id="contentDiv3" class="openseadragon3"></div>
<div id="navigatorDialog3">
<div id="navigatorDiv3" class="findme"></div>
</div>
</div>
<script type="text/javascript">
$('#navigatorDialog').dialog();
var viewer = OpenSeadragon({
id:"contentDiv",
navigatorId: "navigatorDiv",
var viewer1 = OpenSeadragon({
id:"contentDiv1",
navigatorId: "navigatorDiv1",
prefixUrl:"openseadragon/build/openseadragon/images/",
tileSources:{
Image:{
@ -59,6 +81,45 @@
}
});
var viewer2 = OpenSeadragon({
id:"contentDiv2",
navigatorId: "navigatorDiv2",
prefixUrl:"openseadragon/build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"example-images/highsmith/highsmith_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"9221",
Width:"7026"
}
}
}
});
var viewer3 = OpenSeadragon({
id:"contentDiv3",
navigatorId: "navigatorDiv3",
prefixUrl:"openseadragon/build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"example-images/highsmith/highsmith_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"9221",
Width:"7026"
}
}
}
});
</script>
</body>
</html>

64
test/navigatorjquerydemo.html Normal file
View File

@ -0,0 +1,64 @@
<html>
<head>
<title>OpenSeadragon Expose Origina Event Demo</title>
<script type="text/javascript" src='openseadragon/build/openseadragon/openseadragon.js'></script>
<script type="text/javascript" src='jquery-1.9.1.min.js'></script>
<script type="text/javascript" src='jquery-ui-1.10.2.custom/js/jquery-ui-1.10.2.custom.min.js'></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.2.custom/css/smoothness/jquery-ui-1.10.2.custom.min.css"/>
<style type="text/css">
.openseadragon
{
width: 800px;
height: 600px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
.openseadragon-small
{
width: 40px;
height: 30px;
border: 1px solid black;
color: #333; /* text color for messages */
background-color: black;
}
</style>
</head>
<body>
<div class="demoarea">
<div>
Simple demo page to verify that event handlers pass along the original source event
</div>
<div id="contentDiv" class="openseadragon"></div>
<div id="navigatorDialog">
<div id="navigatorDiv" class="findme"></div>
</div>
</div>
<script type="text/javascript">
$('#navigatorDialog').dialog();
var viewer = OpenSeadragon({
id:"contentDiv",
navigatorId: "navigatorDiv",
prefixUrl:"openseadragon/build/openseadragon/images/",
tileSources:{
Image:{
xmlns:"http://schemas.microsoft.com/deepzoom/2008",
Url:"example-images/highsmith/highsmith_files/",
Format:"jpg",
Overlap:"2",
TileSize:"256",
Size:{
Height:"9221",
Width:"7026"
}
}
}
});
</script>
</body>
</html>