Seadragon Ajax Deepzoom small images?

Yes, this is a great feature request! I want to make this kind of scenario easier in future versions of Seadragon Ajax: any type of content in any format, just let me show it in the viewer.

For now, it is possible for regular images, but it requires a bit of a hackish workaround. The essence is that you'll add the image as an overlay -- since overlays are any type of HTML element.

But to add an overlay, the viewer needs to have a tile source open, so we'll make a "dummy" tile source that's really just a blank tile source. This tile source will have the same width and height as the image.


function DummyTileSource(width, height) {
 
// Inheritance
Seadragon.TileSource.apply(this, [width, height, Math.max(width, height)]);
 
// Overridden properties
this.minLevel = this.maxLevel;
 
// Overridden methods
this.getTileUrl = function(level, x, y) {
return "";
};
this.tileExists = function(level, x, y) {
return false;
};
 
}
 
DummyTileSource.prototype = new Seadragon.TileSource();
 

So open this tile source, and once it's opened, add the image as an overlay. By the way, I'm loading the image first here in order to read the width and the height, but if you already know the width and height in advance, you don't have to do this separately first.


var img = document.createElement("img");
var viewer = new Seadragon.Viewer("container");
 
function onImageLoad() {
viewer.openTileSource(
new DummyTileSource(img.width, img.height));
}
 
function onViewerOpen() {
viewer.drawer.addOverlay(img,
new Seadragon.Rect(0, 0, 1, img.height / img.width));
}
 
Seadragon.Utils.addEvent(img, "load", onImageLoad);
viewer.addEventListener("open", onViewerOpen);
 
img.src = "PATH_TO_YOUR_IMAGE_HERE.jpg";
 

Of course, this requires using the library; the simple embed doesn't support this, though I hope we solve this scenario for the embed in the future also!

Let me know how this works out for you.