API Quickstarts - JavaScript
Thanks to our JSONP support, the API is easy to use from JavaScript and works cross-domain.
And thanks to jQuery's JSONP support, the API is even easier to use with jQuery. (If you don't use jQuery, we highly recommend it for advanced JavaScript development!)
To convert your content (image, webpage, PDF, SVG, ...) to a Deep Zoom
Image, call the jQuery
$.ajax() method with
http://api.zoom.it/v1/content/?url=<url>
as the url (replacing <url> with your
content's URL) and "jsonp" as the dataType,
along with a callback function for success.
Be sure the content's URL starts with http:// or https://, and
URL-encode it using the standard encodeURIComponent()
method.
$.ajax({
url: "http://api.zoom.it/v1/content/?url=" +
encodeURIComponent("http://example.com/"),
dataType: "jsonp",
success: function (resp) {
// ...
}
});
When the API responds, your callback function will be called with a
response
object. If this response object has an error
field, your request was rejected, likely because your content's URL was
malformed or the service is down. The value of the error
field will be a human-readable error message you can use during
development.
Otherwise, the response object will have a
content
field that describes your content's info. Parsing this content info is
as easy as checking if the ready field is
true. If it is, your DZI is ready, and you can get its info
via the dzi field.
If the DZI isn’t yet ready, check the failed field to see
if we had a problem. Otherwise, the progress field tells
you how far along our conversion is, between 0 and 1. You may choose to
keep polling until either ready or failed
become true.
If you just want the Zoom.it short URL for your content or the HTML snippet for the embeddable viewer, you can grab those at any time; they'll work even if the DZI isn’t ready.
Once you have the DZI's info, you can plug it into a
Seadragon Ajax
viewer to display the image. You could also use the
JavaScript API for Silverlight to dynamically
create a XAML
<MultiScaleImage> element whose
Source attribute is set to the DZI's URL.
The sample code below puts this all together!
var viewer = new Seadragon.Viewer("container");
function onZoomitResponse(resp) {
if (resp.error) {
// e.g. the URL is malformed or the service is down
alert(resp.error);
return;
}
var content = resp.content;
if (content.ready) {
viewer.openDzi(content.dzi);
} else if (content.failed) {
alert(content.url + " failed to convert.");
} else {
alert(content.url + " is " +
Math.round(100 * content.progress) + "% done.");
}
}
$.ajax({
url: "http://api.zoom.it/v1/content/?url=" +
encodeURIComponent("http://example.com/"),
dataType: "jsonp",
success: onZoomitResponse
});