Openseadragon and WordPress

A number of the images I display on this website are of high quality, and because of that if the whole image were to be loaded in full quality it would take an unacceptable amount of time to load. As a result I turn the image into what is known as a Deep Zoom Image, this basically shows different qualities of the image depending on the zoom, for example the lowest zoom will show the whole image, but with not as much detail as say the highest zoom which will show high detail but only a small part of the photo.

To achieve this, I use a fantastic javascript called OpenSeaDragon which handles rendering the tiles from the Deep Zoom Image (DZI) source, which I have typically split using Microsoft ICE, or various photoshop plugins.

An example of the OpenSeaDragon plugin is visible below, showing a panoramic image of Berwick at Night which is stitched from a number of individual photos:

 

For those that are interested how I did this, the javascript is actually fairly simple. Once you have your OpenSeadragon javascript and related files in a specified directory, it is just a case of using the following code. In wordpress I just went to edit source and added it, updating my javascript location, in addition to the reference to the Deep Zoom Image locations, and the Image locations for the javascript itself:

 </p><div id=”openseadragon1″ style=”width: 1100px; height: 150px;”> </div><script src=”http://www.mywebserver.com/path_to_openseadragon/openseadragon.min.js”></script><script type=”text/javascript”>// <![CDATA[
var viewer = OpenSeadragon({
id: “openseadragon1”,
prefixUrl: “http://www.mywebserver.com/path_to_openseadragon/path_to_openseadragon_images/”,
showNavigator: true,
tileSources: “http://www.mywebserver.com/path_to_dzi_images/path_to_dzi_index_xml.xml”});
// ]]></script><p>