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

some overlays work that had be be completed before finishing tile layers. added brief example of how to how host tiles of zoom.it

Browse Source
This commit is contained in:
thatcher 2013-02-10 22:53:51 -05:00
parent aecf576c06
commit 855e753225
12 changed files with 842 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build.properties
View File

@ -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}

3
build.xml
View File

@ -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 | '/>

118
openseadragon.js
View File

@ -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
);
}
};

46
src/drawer.js
View File

@ -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 ] ));

14
src/overlay.js
View File

@ -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";

12
src/viewer.js
View File

@ -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 = "";

44
src/viewport.js
View File

@ -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
);
}
};

6
www/base.html
View File

@ -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>

64
www/overlay-highlights.html
View File

@ -1,64 +0,0 @@
<h2>example: highlights</h2>
<div class="description">
<p>
&nbsp;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>
&nbsp;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>

5
www/tilesource-dzi.html
View File

@ -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>

102
www/tilesource-zoomit.html Normal file
View File

@ -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>

523
www/ui-overlays.html Normal file
View File

@ -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 &lt;Dec. 5, 1901&gt; </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>