How to Use OpenSeaDragon on any Website

 

OpenSeadragon is an open source project that takes a large image and displays it on a web page as a zoomable and panable image. The large image needs to be converted first. Then code pasted into a page and customized.

Here's a how-to description for the perplexed.

1. Download OpenSeadragon, here, and I'll assume you'll download the zip version.
2. Unzip it using 7-Zip or whatever.
3. Copy the folder 'openseadragon-bin-1.1.1' to the site's local folder and rename it 'openseadragon'.
4. Convert your large image: ('Zoom-it' no longer works so don't go there). Download Microsoft's Deep Zoom Composer.
5. Install it and open a 'New Project'. Name project and note/edit location.
6. On upper right, 'Add Image' which will be imported.
7. Click on 'Compose' and then drag the thumbnail of your image (bottom left) into the middle area. Doesn't matter where.
8. Click on 'Export' and enter a 'Name' for the output folder. Click to select 'Export as a composition (single image)'. Change location if need be, but leave other defaults.
9. Click on 'Export' at bottom right.
10. Click 'View Image Folder' when it comes up.
11. The folder 'dzc_output_files' contains the converted image.
12. Copy it and 'dzc_output.xml' to your 'openseadragon' folder.
13. Paste the following code into your page:

<div id="openseadragon1" style="width: 800px; height: 600px;"></div>
<script src="openseadragon/openseadragon.min.js"></script>
<script type="text/javascript">
var viewer = OpenSeadragon({
id: "openseadragon1",
prefixUrl: "openseadragon/images/",
tileSources: "openseadragon/dzc_output.xml"
});
</script>

If page is not in root directory, edit the links as needed. Perhaps a '../openseadr....' is needed.
Upload everything and try it out.

 

I had to figure out the above to create the following zoomable image. I couldn't find any directions that made sense, so I did what seemed like it might/should work. Unbelieveably it worked the first time. To celebrate, I thought I'd share. Clearly there is a God, one who loves infidels.

 

Celebrate Everybody Draw Muhammad Day, May 20th.

 

Looking for an Infidel Guide?

Try:

The Infidel's Guide to World Religions Simplified

The Infidel's Guide to Islam

The Infidel's Guide to Theism

The Infidel's Guide to Atheism