How to add support for a new website

Add a new zoomable image format to dezoomify

This page aims to explain how to add support for a new website to dezoomify. This is a wiki, don't hesitate to improve it or to report problems as github issues.

Adding support for a new website may be very easy, depending on how complex the site is. You will need to use the developers tools of your browser. In firefox, you can find them under Tools > Web development

Understand how the image format works

In order to work, dezoomify needs to know at least the width and height of the full image, the size of the individual tiles, and the URL pattern of the tiles.

The first step is to collect this information, which is not difficult with the help of a network inspector.

First open your browser's network inspector (in firefox: Tools > Web development > Network inspector), and load the page containing the image in your browser.

Then zoom and pan the image inside the page. While you do so, you should see network requests being made. Try to understand how a tile position inside the image maps to its URL.

You should also find a small json or xml file containing the meta-information. If there is no such file, then the information might be inside the page source (in firefox: Ctrl-U to see the source).

Writing a simple dezoomifier

Dezoomifiers are simple javascript file. Here is a template for a dezoomer:

// exampleDezoom dezoomer
var exampleDezoom = (function(){
  return {
    "name" : "exampleDezoom",
    "description": "a short description",
    "urls" : [
      // A regular expression matching URLs that can be dezoomed with this dezoomer (not mandatory)
      /exampleDezoom\.com\/zoom/
    ],
    "contents" : [
      // A regular expression matching the HTML soure of pages that can be dezoomed by this dezoomer (not mandatory)
      /example\.json/
    ],
    "findFile" : function getInfoFile (baseUrl, callback) {
      // Function that takes an URL, and calls callback when it finds the URL of the meta-info file
      ZoomManager.getFile(baseUrl, {type:"htmltext"}, function (text) {
          // Load the given URL, and find our info in the source, then call callback
      });
    },
    "open" : function (url) {
      // Function that returns all the needed info to dezoomify, from a meta-info file

      ZoomManager.getFile(url, {type:"json"}, function (data, xhr) {
        // Load the meta-info file as json (for example)
        // Here, you should extract at least the images width, height, and tile size
        var returned_data = {
          "width" : parseInt(data.width),
          "height" : parseInt(data.height),
          "tileSize" : data.tiles.width
        };
        ZoomManager.readyToRender(returned_data);
      });
    },

    "getTileURL" : function (x, y, zoom, data) {
      // Function that returns
      return "getTile.php?X="+x+"&Y="+y+"&zoom="+zoom
    }
  };
})();
ZoomManager.addDezoomer(exampleDezoom);

Share your dezoomer

Then open an issue or a pull request here, so that your new dezoomer can be included in the official dezoomify.