openseadragon/www/tilesource-dzi.html

<h2>
    example: deep zoom image support
</h2>
<p>
    The DZI (Deep Zoom Image) format is an
    xml specification maintained by Microsoft and described <a
    href='http://msdn.microsoft.com/en-us/library/cc645077(v=vs.95).aspx'>here</a>.
</p>
<p>
    OpenSeadragon has added supports for DZI format via AJAX ( XML/JSON ), JSONP,
    and as inline configuration ( using the json format ). The DZI specification 
    does not officially describe a JSON format however the 
    examples below illustrate how DZI xml is mapped to json following some
    simple conventions.
</p>


<div class="description">
    <h3>XMLHTTPRequest for DZI XML or JSON</h3>
    <p>
        The DZI Format is implied by a tile source specified as a string
        and which has the </em>.dzi</em> extension.  OpenSeadragon sniffs
        for whether the DZI is formatted as XML or JSON.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example XMLHTTPRequest for DZI ( XML or JSON )
    </div>
    <div id="example-xmlhttprequest-for-dzi" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-xmlhttprequest-for-dzi",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   [
                    "/openseadragon/examples/images/highsmith/highsmith.dzi"
                ]
            });
        </script>
        <noscript>
            <p>Deep zoom is not available unless javascript is enabled.</p>
            <img src='../images/highsmith/01967v.jpg'
                 height='600'/>
        </noscript>
    </div>
    <p>
        Below is a sample DZI file formatted as XML.
    </p>
<pre>
&lt;?xml version="1.0" encoding="UTF-8"?>
&lt;Image xmlns="http://schemas.microsoft.com/deepzoom/2008"
       Format="jpg" 
       Overlap="2" 
       TileSize="256" >
    &lt;Size Height="9221" 
          Width="7026"/>
&lt;/Image></pre>
    <p>
        And the equivalent sample DZI file formatted as JSON.
    </p>
<pre>
{
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
}</pre>
    <p>
        Configuration is done via the 'tileSources' option ( or programatically ).
    </p>
<pre>
OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
    ...
});</pre>
</div>



<div class="description">
    <h3>JSONP Request for DZI JSON</h3>
    <p>
        The DZI JSONP Format is implied by a tile source specified as a string
        and which has the </em>.js</em> extension.  The remainder of the
        file name is expected to match the jsonp callback 
        the example below illustrates
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example JSONPRequest for DZI JSON
    </div>
    <div id="example-jsonprequest-for-dzi-jsonp" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-jsonprequest-for-dzi-jsonp",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   "/openseadragon/examples/images/highsmith/highsmith.js",
                showNavigator:  true
            });
        </script>
        <noscript>
            <p>Deep zoom is not available unless javascript is enabled.</p>
            <img src='../images/highsmith/01967v.jpg'
                 height='600'/>
        </noscript>
    </div>
    <p>
        Below is a sample DZI file formatted as JSONP.
    </p>
<pre>
highsmith({
    "Image": {
        "xmlns":    "http://schemas.microsoft.com/deepzoom/2008",
        "Format":   "jpg", 
        "Overlap":  "2", 
        "TileSize": "256",
        "Size": {
            "Height": "9221",
            "Width":  "7026"
        }
    }
});</pre>
    <p>
        Configuration is done via the 'tileSources' option ( or programatically ).
    </p>
<pre>
OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/highsmith/highsmith.js",
    ...
});</pre>
</div>




<div class="description">
    <h3>Inline Configuration for DZI</h3>
    <p>
        Inline configuration is convenient as well because it avoids a potentially
        complicated JSON/XML Ajax request over the network.  Just plop the equivalent
        json directly into 'tileSources' option.
    </p>
</div>
<div class="demoarea">
    <div class="demoheading">
        Example Inline Configuration for DZI
    </div>
    <div id="example-inline-configuration-for-dzi" 
         class="openseadragon">
    </div>
    <p>
        Configuration is done via the 'tileSources' option ( or programatically ).
    </p>
    <p>
        Note however the non-standard dzi property 'Url' which we must supply
        explicitly since this is normally inferred by the path specified
        for the dzi XML/JSON/JSONP.
    </p>
<pre>
OpenSeadragon({
    ...
    tileSources:   {
        Image: {
            xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
            Url:      "/openseadragon/examples/images/highsmith/highsmith_files/",
            Format:   "jpg", 
            Overlap:  "2", 
            TileSize: "256",
            Size: {
                Height: "9221",
                Width:  "7026"
            }
        }
    }
    ...
});</pre>
</div>
<script type="text/javascript">
    OpenSeadragon({
        id:            "example-inline-configuration-for-dzi",
        prefixUrl:     "/openseadragon/images/",
        showNavigator:  true,
        tileSources:   {
            Image: {
                xmlns:    "http://schemas.microsoft.com/deepzoom/2008",
                Url:      "/openseadragon/examples/images/highsmith/highsmith_files/",
                Format:   "jpg", 
                Overlap:  "2", 
                TileSize: "256",
                Size: {
                    Height: "9221",
                    Width:  "7026"
                }
            }
        }
    });
</script>

<div class="description">
    <h3>Additional Examples</h3>
</div>
<div class="demoarea">
    <div class="demoheading">
        A very wide image.
    </div>
    <div id="example-wide-dzi" 
         class="openseadragon">
        <script type="text/javascript">
            OpenSeadragon({
                id:            "example-wide-dzi",
                prefixUrl:     "/openseadragon/images/",
                tileSources:   "/openseadragon/examples/images/pnp/pan/6a32000/6a32400/6a32487.dzi"
            });
        </script>
    </div>
</div>