The IIIF API specifies a web service that returns an image in response to a standard http or https request. The URL can specify the region, size, rotation, quality characteristics and format of the requested image. A URL can also be constructed to request basic technical information about the image to support client applications. The IIIF API was conceived of to facilitate systematic reuse of image resources in digital image repositories maintained by cultural heritage organizations. The API could be adopted by any image repository or service, and can be used to retrieve static images in response to a properly constructed URL.

OpenSeadragon has added support for IIIF thanks to several of its specifications authors as well as the gist provided by Jon Stroop at this gist.

Example Inline Configuration for IIIF

In this example we also specified the 'preserveViewport' option to retain the viewport zoom and position when changing pages.

In order to make this feel just a little more like a basic book turner, we are adding a useful combination of other options that help to constrain the viewport.

OpenSeadragon({
    ...
    preserveViewport: true,
    visibilityRatio:    1,
    minZoomLevel:       1,
    defaultZoomLevel:   1,
    tileSources:   [{
        "identifier":   "pudl0001/4609321/s42/00000001",   
        "width":        2617,   
        "height":       3600,   
        "scale_factors": [1, 2, 3, 4, 5],   
        "tile_width":   256,   
        "tile_height":  256,   
        "formats":      [ "jpg", "png" ],   
        "qualities":    ["native", "bitonal", "grey", "color"],   
        "profile":      "http://library.stanford.edu/iiif/image-api/compliance.html#level1",
        "image_host":   "http://img.princeton.edu/loris"
    }...,{

    ...//more tile sources

    }]
    ...
});

Example XMLHTTPRequest for IIIF info ( XML or JSON )

Below is a sample IIIF info file formatted as XML.

<?xml version="1.0" encoding="UTF-8"?>
<info xmlns="http://library.stanford.edu/iiif/image-api/ns/">
    <identifier>pudl0001/4609321/s42/00000004</identifier>
    <width>2717</width>
    <height>3600</height>
    <scale_factors>
        <scale_factor>1</scale_factor>
        <scale_factor>2</scale_factor>
        <scale_factor>3</scale_factor>
        <scale_factor>4</scale_factor>
        <scale_factor>5</scale_factor>
    </scale_factors>
    <tile_width>256</tile_width>
    <tile_height>256</tile_height>
    <formats>
        <format>jpg</format>
        <format>png</format>
    </formats>
    <qualities>
        <quality>native</quality>
        <quality>bitonal</quality>
        <quality>grey</quality>
        <quality>color</quality>
    </qualities>
    <profile>http://library.stanford.edu/iiif/image-api/compliance.html#level1</profile>
    <image_host>http://img.princeton.edu/loris</image_host>
</info>

And the equivalent sample IIIF info file formatted as JSON.

{  
    "identifier" : "pudl0001/4609321/s42/00000003",
    "width":        2694,   
    "height":       3600,   
    "scale_factors" : [1, 2, 3, 4, 5],   
    "tile_width" : 256,   
    "tile_height" : 256,   
    "formats" : [ "jpg", "png" ],   
    "qualities" : ["native", "bitonal", "grey", "color"],   
    "profile" : "http://library.stanford.edu/iiif/image-api/compliance.html#level1",
    "image_host": "http://img.princeton.edu/loris"
}

OpenSeadragon({
    ...
    tileSources:   [
        "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000003/info.json",
        "/openseadragon/examples/images/loris/pudl0001/4609321/s42/00000004/info.xml"
    ],
    ...
});

example: iiif tiles support

Inline Configuration for IIIF tile sources.

XMLHTTPRequest for IIIF info.xml or info.json