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.
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
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.
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 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.
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.
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:
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.
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.