Zoomify in HTML5 – implementation advice in Drupal 7

Morgan Strong's blog | Created 8 years ago

We wanted to use Zoomify (http://www.zoomify.com) on our site to show details of high resolution digitized imagery of collection items. However, Zoomify was built as a Flash application, and due to accessibility issues, we can’t use it as a Flash application.

However, Zoomify was nice enough to release a HTML5 version: http://www.zoomify.com/html5.htm - hooray! $30 and the problem is solved.

BUT (and there’s always a but) implementation into our Drupal 7 environment has a few issues when using the Drupal Zoomify module.

Essentially, the Drupal Zoomify module will still produce SWF files by default, even with the new Zoomify HTML5 library.

To rectify this, we needed to overwrite the Drupal Zoomify module so it would overwrite the SWF code, and make a nice HTML5 container and player.

To do this, we placed the following code into the bottom of template.php:

/**
* Theme function to render one Zoomify viewer.
*/
function { Insert your theme name }_zoomify($variables) {
  $node = $variables['node'];
  $fid = $variables['fid'];
  $filepath = $variables['filepath'];
  $viewer = libraries_get_path('zoomify', TRUE) . '/ZoomifyViewer.swf';
  $image = file_create_url(_zoomify_filepath($node, $fid));
  $info = image_get_info($filepath);
  $image_width = $info['width'];
  $image_height = $info['height'];
  $max_width = variable_get('zoomify_width', 800);
  $max_height = variable_get('zoomify_height', 600);
  if (variable_get('zoomify_fixframe', TRUE)) {
    $width = $max_width;
    $height = $max_height;
  }
  elseif ($image_width > $image_height) { // keep aspect ratio
    $width = $max_width;
    $height = ceil($max_width * $image_height / $image_width);
  }
  else {
    $height = $max_height + ZOOMIFY_TOOLBAR_HEIGHT;
    $width = ceil($max_height * $image_width / $image_height);
  }
  $flashVars = variable_get('zoomify_flashvars', NULL);
  if (!empty($flashVars)) {
    // @TODO: add token support for D7
    /* if (module_exists('token')) {
    $flashVars = token_replace($flashVars, 'node', $node);
  }*/
  $flashVars = '&' . $flashVars;
}
$nid = $node->nid;
$type = str_replace('_', '-', $node->type);
  drupal_add_js('jQuery(document).ready(function () { Z.showImage("zoomify", "' . $image . '", "zInitialZoom=15&zLogoVisible=0&zSkinPath={ Insert your path here }/zoomSkins/Dark"); });',
  array('type' => 'inline', 'scope' => 'footer', 'weight' => 50)
);
return <<<EOS
  <div id="zoomify"></div>
EOS;
}

And make sure to insert the Zoomify HTML5 Javascript into the site's default theme.

Works a dream on all browsers, including IE6.

Enjoy!