Fork me on GitHub

OpenSeadragon 4.1.1

example: legacy image pyramids

With a "legacy image pyramid" (LIP), you can make use of your existing images without pregenerating or dynamically creating image tiles. Web developers have commonly created multiple derivatives of various sizes like "thumbnail", "detail", and "best". This is already a simple pyramid and you can use it to create a simple zoomable presentation with OpenSeadragon!

Configuration for the Legacy Tile Source is not yet set in stone, and may change in future versions. However, the goal is to keep it very simple and similar to the examples provided below.

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: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
        height: 889,
        width:  600
    },{
        url: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
        height: 2201,
        width:  1485
    },{
        url: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
        height: 4402,
        width:  2970
    }]
}

Or the equivalent XML: 

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

Configuration is done via the tileSources option (or programmatically). 

OpenSeadragon({
    ...
    tileSources:   "/example-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.

Example JSONPRequest for DZI JSON

Below is a sample DZI file formatted as JSONP. 

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

Configuration is done via the tileSources option (or programmatically). 

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

Inline Configuration for Legacy Tile Sources

Legacy Tile Sources can also be configured inline.

Example Inline Configuration for Legacy Tile Sources 
OpenSeadragon({
    ...
    tileSources: {
        type: 'legacy-image-pyramid',
        levels:[{
            url: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001q.jpg',
            height: 889,
            width:  600
        },{
            url: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001r.jpg',
            height: 2201,
            width:  1485
        },{
            url: '/example-images/rbc/rbc0001/2003/2003rosen1799/0001v.jpg',
            height: 4402,
            width:  2970
            
        }]
    }
    ...
});

Example Image With a Different Aspect Ratio

One Final Example