From 855e75322543001c1b46f528095be4c8dfc32be3 Mon Sep 17 00:00:00 2001
From: thatcher <thatcher.christopher@gmail.com>
Date: Sun, 10 Feb 2013 22:53:51 -0500
Subject: [PATCH] some overlays work that had be be completed before finishing
tile layers. added brief example of how to how host tiles of zoom.it
---
build.properties | 2 +-
build.xml | 3 +-
openseadragon.js | 118 ++++++--
src/drawer.js | 46 +++-
src/overlay.js | 14 +
src/viewer.js | 12 +-
src/viewport.js | 44 +++
www/base.html | 6 +
www/overlay-highlights.html | 64 -----
www/tilesource-dzi.html | 5 +-
www/tilesource-zoomit.html | 102 +++++++
www/ui-overlays.html | 523 ++++++++++++++++++++++++++++++++++++
12 files changed, 842 insertions(+), 97 deletions(-)
delete mode 100644 www/overlay-highlights.html
create mode 100644 www/tilesource-zoomit.html
create mode 100644 www/ui-overlays.html
diff --git a/build.properties b/build.properties
index 73fc8d45..33f337fa 100644
--- a/build.properties
+++ b/build.properties
@@ -6,7 +6,7 @@
PROJECT: openseadragon
BUILD_MAJOR: 0
BUILD_MINOR: 9
-BUILD_ID: 107
+BUILD_ID: 111
BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
diff --git a/build.xml b/build.xml
index ab826346..fc321c13 100644
--- a/build.xml
+++ b/build.xml
@@ -62,7 +62,6 @@
<target name='www' depends='build'>
<echo>| Compiling OpenSeadragon Web Site </echo>
- <publish page='overlay-highlights' title='Overlay Highlights | '/>
<publish page='tilesource-custom' title='Custom Tile Source | '/>
<publish page='tilesource-dzi' title='DZI Tile Source | '/>
@@ -70,6 +69,7 @@
<publish page='tilesource-tms' title='Tiled Map Service Tile Source | '/>
<publish page='tilesource-iiif' title='IIIF Tile Source | '/>
<publish page='tilesource-legacy' title='Legacy Tile Sources | '/>
+ <publish page='tilesource-zoomit' title='Zoom.it Tile Sources | '/>
<publish page='tilesource-sequence' title='Tile Source Sequence | '/>
<publish page='tilesource-collection' title='Tile Source Collections | '/>
@@ -78,6 +78,7 @@
<publish page='ui-toolbar' title='Toolbar | '/>
<publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
<publish page='ui-zoom-and-pan' title='Viewport Zoom and Pan | '/>
+ <publish page='ui-overlays' title='Overlays |'/>
<publish page='developer-debug-mode' title='Developer Tools - Debug Mode | '/>
diff --git a/openseadragon.js b/openseadragon.js
index 4164956d..ecfaf58c 100644
--- a/openseadragon.js
+++ b/openseadragon.js
@@ -1,7 +1,7 @@
/*globals OpenSeadragon */
/**
- * @version OpenSeadragon 0.9.107
+ * @version OpenSeadragon 0.9.111
*
* @fileOverview
* <h2>
@@ -3721,16 +3721,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
}
if( this.preserveVewport ){
-
this.viewport.resetContentSize( this.source.dimensions );
-
}
+ this.source.overlays = this.source.overlays || [];
+
this.drawer = new $.Drawer({
source: this.source,
viewport: this.viewport,
element: this.canvas,
- overlays: this.overlays,
+ overlays: [].concat( this.overlays ).concat( this.source.overlays ),
maxImageCacheCount: this.maxImageCacheCount,
imageLoaderLimit: this.imageLoaderLimit,
minZoomImageRatio: this.minZoomImageRatio,
@@ -3832,8 +3832,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
* @return {OpenSeadragon.Viewer} Chainable.
*/
close: function ( ) {
+
+ if( this.drawer ){
+ this.drawer.clearOverlays();
+ }
+
this.source = null;
this.drawer = null;
+
this.viewport = this.preserveViewport ? this.viewport : null;
//this.profiler = null;
this.canvas.innerHTML = "";
@@ -8400,6 +8406,16 @@ $.Tile.prototype = {
if ( element.parentNode ) {
element.parentNode.removeChild( element );
+ //this should allow us to preserve overlays when required between
+ //pages
+ if( element.prevElementParent ){
+ style.display = 'none';
+ //element.prevElementParent.insertBefore(
+ // element,
+ // element.prevNextSibling
+ //);
+ document.body.appendChild( element );
+ }
}
style.top = "";
@@ -8424,6 +8440,9 @@ $.Tile.prototype = {
size;
if ( element.parentNode != container ) {
+ //save the source parent for later if we need it
+ element.prevElementParent = element.parentNode;
+ element.prevNextSibling = element.nextSibling;
container.appendChild( element );
}
@@ -8442,6 +8461,7 @@ $.Tile.prototype = {
style.left = position.x + "px";
style.top = position.y + "px";
style.position = "absolute";
+ style.display = 'block';
if ( scales ) {
style.width = size.x + "px";
@@ -8586,22 +8606,46 @@ $.Drawer = function( options ) {
(function( _this, overlay ){
- var link = document.createElement("a"),
- rect = new $.Rect(
- overlay.x,
- overlay.y,
+ var element = null,
+ rect = ( overlay.height && overlay.width ) ? new $.Rect(
+ overlay.x || overlay.px,
+ overlay.y || overlay.py,
overlay.width,
overlay.height
+ ) : new $.Point(
+ overlay.x || overlay.px,
+ overlay.y || overlay.py
),
- id = Math.floor(Math.random()*10000000);
-
- link.href = "#/overlay/"+id;
- link.id = id;
- link.className = overlay.className ?
+ id = overlay.id ?
+ overlay.id :
+ "openseadragon-overlay-"+Math.floor(Math.random()*10000000);
+
+ element = $.getElement(overlay.id);
+ if( !element ){
+ element = document.createElement("a");
+ element.href = "#/overlay/"+id;
+ }
+ element.id = id;
+ element.className = element.className + " " + ( overlay.className ?
overlay.className :
- "openseadragon-overlay";
+ "openseadragon-overlay"
+ );
- _this.overlays[ i ] = new $.Overlay( link, rect );
+
+ if(overlay.px !== undefined){
+ //if they specified 'px' so its in pixel coordinates so
+ //we need to translate to viewport coordinates
+ rect = _this.viewport.imageToViewportRectangle( rect );
+ }
+ if( overlay.placement ){
+ _this.overlays[ i ] = new $.Overlay(
+ element,
+ _this.viewport.pointFromPixel(rect),
+ $.OverlayPlacement[overlay.placement.toUpperCase()]
+ );
+ }else{
+ _this.overlays[ i ] = new $.Overlay( element, rect );
+ }
}( this, this.overlays[ i ] ));
@@ -10164,6 +10208,50 @@ $.Viewport.prototype = {
).plus(
bounds.getTopLeft()
);
+ },
+
+ /**
+ * Translates from Seajax viewer coordinate
+ * system to image coordinate system
+ */
+ viewportToImageCoordinates: function(viewerX, viewerY) {
+ return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
+ },
+
+ /**
+ * Translates from image coordinate system to
+ * Seajax viewer coordinate system
+ */
+ imageToViewportCoordinates: function( imageX, imageY ) {
+ return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
+ },
+
+ /**
+ * Translates from a rectanlge which describes a portion of
+ * the image in pixel coordinates to OpenSeadragon viewport
+ * rectangle coordinates.
+ */
+ imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
+ var coordA,
+ coordB,
+ rect;
+ if( arguments.length == 1 ){
+ //they passed a rectangle instead of individual components
+ rect = imageX;
+ return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
+ }
+ coordA = this.imageToViewportCoordinates(
+ imageX, imageY
+ );
+ coordB = this.imageToViewportCoordinates(
+ pixelWidth, pixelHeight
+ );
+ return new $.Rect(
+ coordA.x,
+ coordA.y,
+ coordA.x + coordB.x,
+ coordA.y + coordB.y
+ );
}
};
diff --git a/src/drawer.js b/src/drawer.js
index 3ebc9083..5f39bd0a 100644
--- a/src/drawer.js
+++ b/src/drawer.js
@@ -113,22 +113,46 @@ $.Drawer = function( options ) {
(function( _this, overlay ){
- var link = document.createElement("a"),
- rect = new $.Rect(
- overlay.x,
- overlay.y,
+ var element = null,
+ rect = ( overlay.height && overlay.width ) ? new $.Rect(
+ overlay.x || overlay.px,
+ overlay.y || overlay.py,
overlay.width,
overlay.height
+ ) : new $.Point(
+ overlay.x || overlay.px,
+ overlay.y || overlay.py
),
- id = Math.floor(Math.random()*10000000);
-
- link.href = "#/overlay/"+id;
- link.id = id;
- link.className = overlay.className ?
+ id = overlay.id ?
+ overlay.id :
+ "openseadragon-overlay-"+Math.floor(Math.random()*10000000);
+
+ element = $.getElement(overlay.id);
+ if( !element ){
+ element = document.createElement("a");
+ element.href = "#/overlay/"+id;
+ }
+ element.id = id;
+ element.className = element.className + " " + ( overlay.className ?
overlay.className :
- "openseadragon-overlay";
+ "openseadragon-overlay"
+ );
- _this.overlays[ i ] = new $.Overlay( link, rect );
+
+ if(overlay.px !== undefined){
+ //if they specified 'px' so its in pixel coordinates so
+ //we need to translate to viewport coordinates
+ rect = _this.viewport.imageToViewportRectangle( rect );
+ }
+ if( overlay.placement ){
+ _this.overlays[ i ] = new $.Overlay(
+ element,
+ _this.viewport.pointFromPixel(rect),
+ $.OverlayPlacement[overlay.placement.toUpperCase()]
+ );
+ }else{
+ _this.overlays[ i ] = new $.Overlay( element, rect );
+ }
}( this, this.overlays[ i ] ));
diff --git a/src/overlay.js b/src/overlay.js
index c30d0fe4..7f0035c8 100644
--- a/src/overlay.js
+++ b/src/overlay.js
@@ -100,6 +100,16 @@
if ( element.parentNode ) {
element.parentNode.removeChild( element );
+ //this should allow us to preserve overlays when required between
+ //pages
+ if( element.prevElementParent ){
+ style.display = 'none';
+ //element.prevElementParent.insertBefore(
+ // element,
+ // element.prevNextSibling
+ //);
+ document.body.appendChild( element );
+ }
}
style.top = "";
@@ -124,6 +134,9 @@
size;
if ( element.parentNode != container ) {
+ //save the source parent for later if we need it
+ element.prevElementParent = element.parentNode;
+ element.prevNextSibling = element.nextSibling;
container.appendChild( element );
}
@@ -142,6 +155,7 @@
style.left = position.x + "px";
style.top = position.y + "px";
style.position = "absolute";
+ style.display = 'block';
if ( scales ) {
style.width = size.x + "px";
diff --git a/src/viewer.js b/src/viewer.js
index 93933008..e5e4c575 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -402,16 +402,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
}
if( this.preserveVewport ){
-
this.viewport.resetContentSize( this.source.dimensions );
-
}
+ this.source.overlays = this.source.overlays || [];
+
this.drawer = new $.Drawer({
source: this.source,
viewport: this.viewport,
element: this.canvas,
- overlays: this.overlays,
+ overlays: [].concat( this.overlays ).concat( this.source.overlays ),
maxImageCacheCount: this.maxImageCacheCount,
imageLoaderLimit: this.imageLoaderLimit,
minZoomImageRatio: this.minZoomImageRatio,
@@ -513,8 +513,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
* @return {OpenSeadragon.Viewer} Chainable.
*/
close: function ( ) {
+
+ if( this.drawer ){
+ this.drawer.clearOverlays();
+ }
+
this.source = null;
this.drawer = null;
+
this.viewport = this.preserveViewport ? this.viewport : null;
//this.profiler = null;
this.canvas.innerHTML = "";
diff --git a/src/viewport.js b/src/viewport.js
index 8470637c..5a055195 100644
--- a/src/viewport.js
+++ b/src/viewport.js
@@ -580,6 +580,50 @@ $.Viewport.prototype = {
).plus(
bounds.getTopLeft()
);
+ },
+
+ /**
+ * Translates from Seajax viewer coordinate
+ * system to image coordinate system
+ */
+ viewportToImageCoordinates: function(viewerX, viewerY) {
+ return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
+ },
+
+ /**
+ * Translates from image coordinate system to
+ * Seajax viewer coordinate system
+ */
+ imageToViewportCoordinates: function( imageX, imageY ) {
+ return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
+ },
+
+ /**
+ * Translates from a rectanlge which describes a portion of
+ * the image in pixel coordinates to OpenSeadragon viewport
+ * rectangle coordinates.
+ */
+ imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
+ var coordA,
+ coordB,
+ rect;
+ if( arguments.length == 1 ){
+ //they passed a rectangle instead of individual components
+ rect = imageX;
+ return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
+ }
+ coordA = this.imageToViewportCoordinates(
+ imageX, imageY
+ );
+ coordB = this.imageToViewportCoordinates(
+ pixelWidth, pixelHeight
+ );
+ return new $.Rect(
+ coordA.x,
+ coordA.y,
+ coordA.x + coordB.x,
+ coordA.y + coordB.y
+ );
}
};
diff --git a/www/base.html b/www/base.html
index 1cb052fc..02ef5bd8 100644
--- a/www/base.html
+++ b/www/base.html
@@ -85,6 +85,9 @@
<li><a href='/openseadragon/examples/tilesource-custom/'>
<span>Custom Tile Sources</span>
</a></li>
+ <li><a href='/openseadragon/examples/tilesource-zoomit/'>
+ <span>Pulling from Zoom.it</span>
+ </a></li>
</ul>
</li>
@@ -100,6 +103,9 @@
<li><a href='/openseadragon/examples/ui-zoom-and-pan/'>
<span>Zoom and Pan</span>
</a></li>
+ <li><a href='/openseadragon/examples/ui-overlays/'>
+ <span>Overlays</span>
+ </a></li>
<li><a href='/openseadragon/examples/ui-viewport-navigator/'>
<span>Viewport Navigator</span>
</a></li>
diff --git a/www/overlay-highlights.html b/www/overlay-highlights.html
deleted file mode 100644
index 9a0856e5..00000000
--- a/www/overlay-highlights.html
+++ /dev/null
@@ -1,64 +0,0 @@
-<h2>example: highlights</h2>
-
-<div class="description">
- <p>
- Highlighted overlays are very useful for directing users attention to
- specific areas of interest, though the style is often decided based
- on the specific content being presented.
- </p>
- <p>
- OpenSeadragon makes it easy to declare highlighted areas and control
- the presentation through simple css mechanisms.
- </p>
- <p>
- <strong>Try it on the iPad! (new since 0.9)</strong>
- </p>
-</div>
-
-<div class="demoarea">
- <div class="demoheading">
- Highlights
- </div>
- <div id="toolbarDiv" class="toolbar">
- <span style='float:right;margin:10px 20px 0 0'>
- | <a href="#">show highlights</a>
- | <a href="#">hide highlights</a>
- </span>
- </div>
- <div id="contentDiv" class="openseadragon"></div>
-</div>
-
-<script type="text/javascript">
- OpenSeadragon({
- id: "contentDiv",
- prefixUrl: "/openseadragon/images/",
- tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
- toolbar: "toolbarDiv",
- showNavigator: true,
- overlays: [{
- x: 0.45,
- y: 0.35,
- width: 0.08,
- height: 0.05,
- className: 'highlight'
- },{
- x: 0.22,
- y: 0.38,
- width: 0.1,
- height: 0.15,
- className: 'highlight'
- },{
- x: 0.65,
- y: 0.38,
- width: 0.1,
- height: 0.15,
- className: 'highlight'
- },{
- x: 0.45,
- y: 0.50,
- width: 0.08,
- height: 0.15,
- className: 'highlight'
- }]
- });
-</script>
\ No newline at end of file
diff --git a/www/tilesource-dzi.html b/www/tilesource-dzi.html
index 18499426..150f5f7d 100644
--- a/www/tilesource-dzi.html
+++ b/www/tilesource-dzi.html
@@ -33,8 +33,9 @@
OpenSeadragon({
id: "example-xmlhttprequest-for-dzi",
prefixUrl: "/openseadragon/images/",
- tileSources: "/openseadragon/examples/images/highsmith/highsmith.dzi",
- showNavigator: true
+ tileSources: [
+ "/openseadragon/examples/images/highsmith/highsmith.dzi"
+ ]
});
</script>
<noscript>
diff --git a/www/tilesource-zoomit.html b/www/tilesource-zoomit.html
new file mode 100644
index 00000000..bbefe5e5
--- /dev/null
+++ b/www/tilesource-zoomit.html
@@ -0,0 +1,102 @@
+<h2>
+ example: integrating with zoom.it tiles
+</h2>
+<p>
+ Zoom it provides a simple service based way of loading images and serving
+ out tiles. The Zoomit service is based on the DZI format.
+</p>
+<p>
+ OpenSeadragon can render the DZI tiles and provide you all the features
+ you can only get with OpenSeadragon.
+</p>
+
+
+<div class="description">
+ <h3>Pulling tiles from Zoom.it</h3>
+ <p>
+ If you are pulling image tiles from zoom it, please understand and
+ respect any policy and copy rights of the image creator.
+ </p>
+</div>
+<div class="demoarea">
+ <div class="demoheading">
+ Example inline configuration for rendering dzi's hosted at zoom.it
+ </div>
+ <div id="example-zoomit-tilesource"
+ class="openseadragon">
+ <script type="text/javascript">
+ OpenSeadragon({
+ id: "example-zoomit-tilesource",
+ prefixUrl: "/openseadragon/images/",
+ tileSources: [{
+ Image: {
+ xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+ Url: "http://cache.zoom.it/content/WwI0_files/",
+ TileSize: "254",
+ Overlap: "1",
+ Format: "jpg",
+ ServerFormat: "Default",
+ Size: {
+ Width: "5816",
+ Height: "3961"
+ }
+ }
+ },{
+ Image: {
+ xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+ Url: "http://static.seadragon.com/content/misc/carina-nebula_files/",
+ TileSize: "254",
+ Overlap: "1",
+ Format: "jpg",
+ ServerFormat: "Default",
+ Size: {
+ Width: "29566",
+ Height: "14321"
+ }
+ }
+ },{
+ Image: {
+ xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+ Url: "http://static.seadragon.com/content/misc/milwaukee_files/",
+ TileSize: "254",
+ Overlap: "1",
+ Format: "jpg",
+ ServerFormat: "Default",
+ Size: {
+ Width: "15497",
+ Height: "5378"
+ }
+ }
+ }]
+ });
+ </script>
+ <noscript>
+ <p>Deep zoom is not available unless javascript is enabled.</p>
+ <img src='../images/highsmith/01967v.jpg'
+ height='600'/>
+ </noscript>
+ </div>
+
+ <p>
+ Configuration is done via the 'tileSources' option ( or programatically ).
+ </p>
+<pre>
+OpenSeadragon({
+ ...
+ tileSources: [{
+ Image: {
+ xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+ Url: "http://cache.zoom.it/content/WwI0_files/",
+ TileSize: "254",
+ Overlap: "1",
+ Format: "jpg",
+ ServerFormat: "Default",
+ Size: {
+ Width: "5816",
+ Height: "3961"
+ }
+ }
+ }]
+ ...
+});</pre>
+</div>
\ No newline at end of file
diff --git a/www/ui-overlays.html b/www/ui-overlays.html
new file mode 100644
index 00000000..a1afb224
--- /dev/null
+++ b/www/ui-overlays.html
@@ -0,0 +1,523 @@
+<h2>example: overlays</h2>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
+
+<div class="description">
+ Overlays are an important mechanism for adding additional infomation channels
+ in a deep zoom image. Below we present just a few examples of how to
+ add some simple overlays.
+ <p>
+ ( Tile source in this example is from Chronicling America
+ at the <a href='http://www.loc.gov/'>Library of Congress</a> )
+ </p>
+</div>
+
+
+<div class="demoarea">
+ <div class="demoheading">
+ Tile source overlays.
+ </div>
+ <p>
+ Highlighted overlays are very useful for directing users attention to
+ specific areas of interest, though the style is often decided based
+ on the specific content being presented.
+ </p>
+ <p>
+ OpenSeadragon makes it easy to declare highlighted areas and control
+ the presentation through simple css mechanisms. <em>A tile source overlay
+ is specific to the particular tile source.</em> So if you have a sequence of
+ tile sources and want to over lay unique content on each, use this mechanism.
+ </p>
+ <div id="example-tilesource-overlay" class="openseadragon">
+ <style>
+ .navigator .highlight{
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ border: 2px solid #900;
+ outline: none;
+ background-color: #900;
+ }
+ .highlight{
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ border: 2px solid #0A7EbE;
+ outline: 10px auto #0A7EbE;
+ background-color: white;
+ }
+ .highlight:hover, .highlight:focus{
+ filter: alpha(opacity=70);
+ opacity: 0.7;
+ background-color: transparent;
+ }
+ </style>
+ <script type="text/javascript">
+ var chronicling_america_example = function( sequence ){
+ return function(level, column, row){
+ var px = 0;
+ if (column!=0) {
+ px = this.tileSize * column - this.tileOverlap;
+ }
+ var py = 0;
+ if (row!=0) {
+ py = this.tileSize * row - this.tileOverlap;
+ }
+ var scale = this.getLevelScale(level);
+ var dimensionsScaled = this.dimensions.times(scale);
+
+ // find the dimension of the tile, adjust for no
+ // overlap data on top and left edges
+ var sx = this.tileSize + (column==0 ? 1 : 2) * this.tileOverlap;
+ var sy = this.tileSize + (row==0 ? 1 : 2) * this.tileOverlap;
+
+ // adjust size for single-tile levels where the image
+ // size is smaller than the regular tile size, and for
+ // tiles on the bottom and right edges that would
+ // exceed the image bounds.
+ sx = Math.min(sx, dimensionsScaled.x - px);
+ sy = Math.min(sy, dimensionsScaled.y - py);
+
+ var tile_width = parseInt(sx);
+ var tile_height = parseInt(sy);
+
+ var x1 = parseInt(px / scale);
+ var y1 = parseInt(py / scale);
+ var x2 = parseInt((px + sx) / scale);
+ var y2 = parseInt((py + sy) / scale);
+
+ return 'http://chroniclingamerica.loc.gov/lccn/sn85066387/1898-01-09/ed-1/seq-'+
+ sequence+'/'+
+ 'image_'+tile_width+'x'+tile_height+
+ '_from_'+x1+','+y1+
+ '_to_'+x2+','+y2+'.jpg';
+ };
+ };
+
+ OpenSeadragon({
+ id: "example-tilesource-overlay",
+ prefixUrl: "/openseadragon/images/",
+ tileSources: [{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ overlays: [{
+ id: 'example-overlay',
+ x: 0.33,
+ y: 0.75,
+ width: 0.2,
+ height: 0.25,
+ className: 'highlight'
+ }],
+ getTileUrl: chronicling_america_example(17)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(18)
+ }],
+ onPageChange: function() {
+ //Tooltips
+ setTimeout(bindtooltip, 2000);
+ }
+ });
+
+ jQuery(function() {
+ //Tooltips
+ setTimeout(bindtooltip, 2000);
+ });
+
+ function bindtooltip(){
+ var tip = jQuery('#example-tip');
+ jQuery("#example-overlay").hover(function(e){
+ var mousex = e.pageX + 20, //Get X coodrinates
+ mousey = e.pageY + 20, //Get Y coordinates
+ tipWidth = tip.width(), //Find width of tooltip
+ tipHeight = tip.height(), //Find height of tooltip
+
+ //Distance of element from the right edge of viewport
+ tipVisX = $(window).width() - (mousex + tipWidth),
+ //Distance of element from the bottom of viewport
+ tipVisY = $(window).height() - (mousey + tipHeight);
+
+ if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
+ mousex = e.pageX - tipWidth - 20;
+ } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
+ mousey = e.pageY - tipHeight - 20;
+ }
+ tip.css({ top: mousey, left: mousex, position: 'absolute' });
+ tip.show().css({opacity: 0.8}); //Show tooltip
+ }, function() {
+ tip.hide(); //Hide tooltip
+ });
+ };
+ </script>
+
+ <div id="example-tip" style='display:none;width:250px;background-color:#fff;'>
+ <p>
+ The overlay can provide a class name and id to bind additional events to.
+ </p>
+ </div>
+ </div>
+</div>
+<p>
+The relevant configuration options are shown below. Note the className and id attributes
+will be passed to the overlay element so you can use bind css styles and events to it.
+<em>Be sure to put your styles in the document head, inside the openseadragon viewer element,
+or apply them dynamically so they will persist when full screen mode is entered.</em>
+</p>
+
+<pre>
+ OpenSeadragon({
+ ...
+ tileSources: [{
+ ...
+ overlays: [{
+ id: 'example-overlay',
+ x: 0.33,
+ y: 0.75,
+ width: 0.2,
+ height: 0.25,
+ className: 'highlight'
+ }],
+ ...
+ }]
+ ...
+ });
+</pre>
+
+
+
+<div class="demoarea">
+ <div class="demoheading">
+ Viewport overlays.
+ </div>
+ <p>
+ OpenSeadragon also supports overlays that persist accross image sequences.
+ In this case the overlay is simply configured outside of the tileSource.
+ </p>
+ <p>
+ This example also demonstrates the ability to configure the overlay position
+ in terms of image pixel coordinates. The difference is infered by use of
+ <strong>px</strong>, and <strong>py</strong>, instead of x and y.
+ </p>
+ <div id="example-viewport-overlay" class="openseadragon">
+ <style>
+ .filter{
+ opacity: 0.2;
+ filter: alpha(opacity=20);
+ background-color: #7FFF00;
+ }
+ </style>
+ <script type="text/javascript">
+ OpenSeadragon({
+ id: "example-viewport-overlay",
+ prefixUrl: "/openseadragon/images/",
+ overlays: [{
+ id: 'global-overlay-filter',
+ px: 0,
+ py: 0,
+ width: 6425,
+ height: 8535,
+ className: 'filter'
+ }],
+ tileSources: [{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(19)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(20)
+ }]
+ });
+
+ </script>
+ </div>
+
+ <pre>
+ OpenSeadragon({
+ ...
+ overlays: [{
+ id: 'global-overlay-filter',
+ px: 0,
+ py: 0,
+ width: 6425,
+ height: 8535,
+ className: 'filter'
+ }],
+ ...
+ });
+ </pre>
+</div>
+
+<div class="demoarea">
+ <div class="demoheading">
+ Overlaying complex html.
+ </div>
+ <p>
+ By default OpenSeadragon checks for an existing element in the DOM that
+ matches the id of the overlay id (if one is specified). If that content
+ is found, OpenSeadragon will use it for the overlay, otherwise it will create
+ a link to ensure keyboard accesibilty to the target ( as in the examples above ).
+ </p>
+ <p>
+ In this example we display some additional metadata to the right of the image itself.
+ </p>
+ <div id="complex-html-overlay" class="openseadragon">
+ <script type="text/javascript">
+ OpenSeadragon({
+ id: "complex-html-overlay",
+ prefixUrl: "/openseadragon/images/",
+ showNavigator: false,
+ preserveViewport: true,
+ minZoomLevel: 1,
+ overlays: [{
+ minLevel: 8,
+ px: 6425,
+ py: 0,
+ width: 6425,
+ height: 8535,
+ id: 'html-overlay'
+ }],
+ tileSources: [{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(1)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(2)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(3)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(4)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(5)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(6)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(7)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(8)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(9)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(10)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(11)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(11)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(12)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(13)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(14)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(15)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(16)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(17)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(18)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(19)
+ },{
+ minLevel: 8,
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(20)
+ }]
+ });
+
+ </script>
+ <style>
+ .navigator .no-overlay-in-navigator{
+ display:none;
+ }
+ #html-overlay{
+ opacity: 0.7;
+ color: #fff;
+ filter: alpha(opacity=70);
+ }
+ #html-overlay .info{
+ padding: 20px;
+ }
+ #html-overlay dt{
+ font-weight: bold;
+ }
+ #html-overlay dl ul{
+ padding: 0px;
+ }
+ </style>
+ <div id='html-overlay' style=''>
+
+ <div class="info">
+ <dl class="alt">
+ <dt>Title: </dt>
+ <dd>
+ The San Francisco call. : (San Francisco [Calif.]) 1895-1913
+ </dd>
+
+ <dt>Alternative Titles:</dt>
+ <dd>
+ <ul class="bullet_blue">
+ <li> Call </li>
+ <li>Call chronicle examiner</li>
+ <li>Call-chronicle-examinerApr. 19, 1906 </li>
+ <li>Sunday call <Dec. 5, 1901> </li>
+ </ul>
+ </dd>
+
+ <dt>Preceding Titles:</dt>
+ <dd>
+ <ul class="bullet_blue">
+ <li><a href="http://chroniclingamerica.loc.gov/lccn/sn94052989/">The morning call. (San Francisco [Calif.]) 1878-1895</a></li>
+ </ul>
+ </dd>
+ </dl>
+ <a style=''
+ href="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/">
+ <img class="thumbnail"
+ src="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/thumbnail.jpg" alt="">
+ </a>
+ </div>
+
+ </div>
+ </div>
+
+ <pre>
+ OpenSeadragon({
+ ...
+ preserveViewport: true,
+ showNavigator: false,
+ minZoomLevel: 1,
+ overlays: [{
+ px: 6425,
+ py: 0,
+ width: 6425,
+ height: 8535,
+ id: 'html-overlay'
+ }],
+ tileSources: [{
+ width: 6425,
+ height: 8535,
+ tileSize: 256,
+ tileOverlap: 1,
+ getTileUrl: chronicling_america_example(1)
+ },{
+ ...
+ }]
+ ...
+ });
+ </pre>
+</div>
+
\ No newline at end of file