Creating a web viewer

Ok, you have created and uploaded your deep zoom image tiles to your own cloud storage. Now you would like to actually view them. More precisely, you would like to create a web page with a viewer, so that your colleagues can also take a look. Even better would be to create a multi-image viewer.

We first need to check which images are available in the cloud storage using the DeepZoomBucket.list_names()) method.

from deepzoomup import DeepZoomBucket 
dzb = DeepZoomBucket(application_key_id, application_key, bucket_name)
dzb.list_names()
['RP-T-1898-A-3689_Recto', 'RP-T-1898-A-3689_Trans-Recto']

Now, we can create a html snippet for the images we want to include.

html_snippet = dzb.make_html_snippet(['RP-T-1898-A-3689_Recto', 'RP-T-1898-A-3689_Trans-Recto'])
print(html_snippet)
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/openseadragon.min.js"
integrity="sha512-qvQYH6mPuE46uFcWLI8BdGaJpB5taX4lltbSIw5GF4iODh2xIgyz5ii1WpuzPFUknHCps0mi4mFGR44bjdZlZg=="
crossorigin="anonymous">
</script>

<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1_dzi",
prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.4.2/images/",
tileSources: [
 "https://f002.backblazeb2.com/file/deepzoom-demo/deepzoom/dzp_RP-T-1898-A-3689_Recto/RP-T-1898-A-3689_Recto.dzi",
 "https://f002.backblazeb2.com/file/deepzoom-demo/deepzoom/dzp_RP-T-1898-A-3689_Trans-Recto/RP-T-1898-A-3689_Trans-Recto.dzi"],
sequenceMode: true,
preserveViewport: true,
showReferenceStrip: true,
showNavigator: true
});
</script>

<div id="openseadragon1_dzi" style="width: 800px; height: 500px; background-color: snow"></div>

And here is the result when embedded in a web page:

Susanna and the Elders (c.1650-c.1655) Rembrandt van Rijn, Rijksmuseum RP-T-1898-A-3689

For more information about this javascript code see: openseadragon.