I recently purchased Zoomify HTML5 Designer to include in an updated web site design. The Zoomify concept is to provide a viewer that will allow your website visitor to view images in a much larger size/resolution. My main reason for looking for a product like Zoomify is that I enjoy creating panoramic images and they just don’t look very good on my website.

The HMTL5 package consists of a workstation application and a server side Javascript application. The workstation app slices up the images into tiles and places those tiles and information about the image into a folder structure that are uploaded to the server. The Javascript application is called by a web page to display the image and a toolbar that allows the user to navigate the image.

Initially, integrating Zoomify into my updated design proved problematic. I had been looking at customizing an open source gallery such as Gallery3 or ZenPhoto. After a quick perusal of each of the gallery software’s code PHP base, the task of writing a plugin to use Zoomify seemed very daunting. I’m still considering that as an option, but I wanted more “immediate” gratification.

I came up with an interim design concept: see if I can use my current gallery organization, but just change the existing viewer to the Zoomify Javascript viewer. After initial testing and familiarizing myself with the Zoomify API, I was able to get it to work essentially the same way as my first website design, but now with the “zoom-on-steroids” capability of Zoomify.

It was not a completely smooth update as I struggled a bit with the implementation of the Zoomify Javascript app. My initial problem involved Zoomify’s use of several absolute URI references to folders that it uses for ‘Assets’, e.g., skins, watermarks, etc. Although that requirement was initially a pain, I think it led to some cleaner code and page organization on my part.

Previously, I had a separate viewer page for each of my galleries. Each viewer page had a hidden form with the list of images with metadata information to display in the viewer. This was a simple way to manage the multiple galleries and implementing new galleries by just copying the core page code and then changing the image data in the form. However, this was a maintenance nightmare as any change to the core viewer code/design would not duplicate to the other galleries unless I explicitly remembered to copy the code changes to the other galleries.

The new viewer integration allows a single page that accepts URI based arguments. I pass to the page the gallery and the image number. Each gallery folder has it’s own file that lists the image filenames and metadata. The viewer page reads the list and then starts the Zoomify viewer.

The developers of Zoomify have been extremely helpful in answering questions and respond very quickly when I have noticed bugs and inconsistent browser behaviors.

Leave a Reply