Handling the display of images where their height or their width exceeds the height or width of the user’s screen is an on-going challenge. It’s also been a moving target of a challenge. As the cameras we use to capture images become more powerful, the size of screens on which we might want to display these images get smaller. Just when the web design community settles on a neat way of dealing with this, the parameters shift once more.

To that mix might also be added the constraint of using plugins which are available for a particular platform. What’s available for Wordpress, might not be available for Drupal, and so on.

As a Drupal user, I have worked my way through a range of plugin solutions, most of which employ JavaScript to overlay larger versions of an image on top of the current page. The roll-call is impressive: Colorbox, Lightbox2, Thickbox, Shadowbox, jQuery Lightbox, FancyBox, Cloud Zoom, JuiceBox and EasyZoom come to mind, with apologies to many not listed there. It’s a packed field. Each of these offers a battery of different functions, throws up browser compatibility issues, may or may not be gesture/touch-enabled and may require a third-party license.

Magic Zoom Plus

A plugin that is currently ticking all these boxes for me is Magic Zoom Plus. It satisfies practically every criterion I can think of and presents itself as an intuitive image zoom system whose behaviour users can quickly understand. I use the version supplied as a Drupal module. There are plugins for Wordpress, a zillion other platforms and plain old HTML.

  • it places a “Hover to zoom” hint onto an image if the display is mouse-driven
  • it places a “Tap to zoom” hint onto an image if the display is touch and gesture driven
  • the exact wording of these hints can be customised
  • if there is space alongside the unzoomed image to display a portion of the zoomed image, it will be displayed there; as that happens, the unzoomed image is masked to show which rectangle is currently showing in the zoomed overlay
  • this zoomed overlay shows inside the unzoomed image if there isn’t space available
  • in both of these renditions, the position of the mouse or finger will determine the ‘area of interest’ being zoomed
  • a further click or tap under any of these circumstances will pop the larger image up in a full-screen overlay, sized to not exceeds the viewport’s bounds
  • a further click or tap from there will show the larger image at a 1:1 resolution
  • in that mode, a mouse hover or a gesture will shift the 1:1 ‘area of interest’ into view
  • with this full screen overlay, there are previous/next controls that allow the user to scroll/swipe through all images of the same page
  • small thumbnails of the page’s image set can be displayed inside this overlay
  • in Drupal there is a lengthy admin-side configuration page, giving access to preferences associated with this behaviour
  • individual Drupal pages/nodes can be excluded from using the plugin
  • on pages/nodes where the plugin is used, there’s about a 120Kb payload of external scripts
A screenshot of an image with Magic Zoom Plus notifications
An image with Magic Zoom Plus notifications

Above is a screenshot showing the unzoomed image, with a desktop (mouse-driven) hint to hover over the image to initiate the zoom. On a tablet or phone that text would be “Tap to zoom” – or whatever you specify in the admin’s preferences page.

A screenshot of an image with Magic Zoom Plus side-by-side detail overlay
An image with Magic Zoom Plus side-by-side detail overlay

Above is a screenshot showing the side-by-side overlay (on the right) that results from simply hovering over the original image (on the left). Hovering or swiping over the original image moves the ‘area’ of interest’ within the right-hand overlay and applies a fade-mask to the part of the original image that lies outside the bounds of the ‘area of interest’. The overlay’s position can be specified: left, right, top or bottom.

A screenshot of an image with Magic Zoom Plus full-screen gallery display
An image with Magic Zoom Plus full-screen gallery display

A click or tap in the original image displays this full-screen overlay, shrunk to fit the viewport. A further click or tap would then zoom the image to a 1:1 resolution. Note the previous/next controls and the thumbnail display running along the bottom of the overlay. Properties of all these details can be tweaked.

Minor room for improvement

Two minor wrinkles are noticeable for designers working with Drupal. The first is that a link to the admin-side menu is added to the default admin toolbar, instead of being added into the admin’s config page.

Magic Zoom Plus' link in Drupal's admin toolbar
Magic Zoom Plus’ link in Drupal’s admin toolbar

If all Drupal module developers took that route, the admin toolbar would quickly become unusable. Better to place links to module configuration pages on the admin’s config page.

The other niggle is that you can specify on which pages the JavaScript plugin is loaded, but not those on which it should not be loaded. For a large site, where the majority of pages don’t require this functionality, this is a handicap. It forces you to list all the nodes that don’t need the additional 120 or so kilobytes of script, although wildcard notations for Drupal paths can be applied.

Smoothly intuitive

Taken together this image zoom plugin is exquisite. It provides an intuitive way to zoom detailed images with a minimum number of clicks or taps required by the user. It integrates well into the Drupal environment. It inter-operates well with Drupal’s image style sub-system so that zooming could be applied across the board for designated images, hiving off the creation of server-side image derivatives. Oh, and their after sales and technical support is A1.

Magic Zoom Plus

Where can I get it? The website of its publishers, Magic Tool Box.

A snag — and a fix!

Delightful though Magic Zoom Plus is in Drupal 7, a version that works in either Drupal 8 or in Backdrop CMS is not available. However, once the site moved from Drupal 7 to Backdrop CMS, I was keen to integrate Magic Zoom Plus into it, module or no module. Here’s how.

Find your licensed version of Magic Zoom and copy the file magiczoom.js to your Backdrop theme’s js folder. Then copy the file magiczoom.css to your Backdrop theme’s css folder. Once you’ve done that, modify your theme’s .info file by adding the following two lines:

stylesheets[all][] = css/magiczoomplus.css
scripts[] = js/magiczoom.js

Magic Zoom Plus will now work when you wire up any appropriate HTML code. You need to specify the linked image’s class: class=”MagicZoom”. Markup is the same as you would have used if Magic Zoom Plus was provided by a module.

You may need to apply various parameters. With the Drupal module this was available within a module configuration page. Without a module, you will need to create a parameters javascript file and link this to your theme. An example file might be:

// MagicZoom customised parameters:
var mzOptions = {
	zoomPosition: 'inner',
    expand: 'window',
    rightClick: 'true',
	lazyZoom: 'true',
	zoomCaption: 'top',
	transitionEffect: 'true',
	textHoverZoomHint: '',
	textClickZoomHint: "Click to zoom",
	textExpandHint: "Click to expand",
	hint: 'always'

var mzMobileOptions = {
	lazyZoom: 'false',
	zoomMode: 'magnifier'

You could then save that as a new javascript file in your theme’s js folder, then link that to your theme in the theme’s .info file, as follows:

scripts[] = magiczoom_parameters.js

The publishers provide all that you need to grapple with these parameters here. By bundling these parameters up into a small javascript file they will be available globally and you’ll not need to specify them with each image. Happy zooming!

February 2021 update

In the on-going challenge described above, MagicZoom was removed from this website in February 2021! An upcoming blog post will explain why — as well as detailing what was used to replace it.