example: legacy image pyramids

A "legacy image pyramid" (LIP) just means you can finally make use of your existing images without pregenerating or dynamically creating image tiles. Web developers have commonly created derivatives of various sizes that are intended for use for different web presentations or for download, like "thumbnail", "detail", and "best" etc. This is already a simple pyramid and you can use them to create a simple deep zoom presenation with OpenSeadragon!

XMLHTTPRequest for LIP JSON

The LIP format is implied by a tile source specified as a string (URL) and which does not have the .js extension. The information is loaded via AJAX and inspection of the content of the url is used to determine if it is JSON or XML formatted.

Example XMLHTTPRequest for LIP ( XML or JSON )

Below is a sample LIP file formatted as JSON. 

{
    type: 'legacy-image-pyramid',
    levels:[{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
        height: 889,
        width:  600
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
        height: 2201,
        width:  1485
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
        height: 4402,
        width:  2970
    }]
}

Or the equivalent XML: 

<image type='legacy-image-pyramid'>
    <level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg'
        height='889'
        width='600'/>
    <level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg'
        height='2201'
        width='1485'/>
    <level
        url='/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg'
        height='4402'
        width='2970'/>
</image>

Configuration is done via the 'tileSources' option ( or programatically ). 

OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
    ...
});

JSONP Request for LIP JSON

The LIP JSONP format is implied by a tile source specified as a string and which has the .js extension. The remainder of the file name is expected to match the jsonp callback the example below illustrates

Example JSONPRequest for DZI JSON

Below is a sample DZI file formatted as JSONP. 

rosen({
    type: 'legacy-image-pyramid',
    levels:[{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
        height: 889,
        width:  600
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
        height: 2201,
        width:  1485
    },{
        url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
        height: 4402,
        width:  2970
    }]
});

Configuration is done via the 'tileSources' option ( or programatically ). 

OpenSeadragon({
    ...
    tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
    ...
});

Inline Configuration for Legacy Tile Sources

We currently only support Legacy Tile Sources configured inline as the example below demonstrates.

Example Inline Configuration for Legacy Tile Sources

The Legacy Tile Source has not been described as an official 'specification', though we would like to eventually create a specification for it because of how useful it can be to create interactive zoom interfaces using existing web derivatives. As such it may change though the goal is to keep it very simple and similar to the examples provided below. 

OpenSeadragon({
    ...
    tileSources: {
        type: 'legacy-image-pyramid',
        levels:[{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
            height: 889,
            width:  600
        },{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
            height: 2201,
            width:  1485
        },{
            url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
            height: 4402,
            width:  2970
            
        }]
    }
    ...
});

One example showing an image with a different aspect ratio.s

One final example.