Add Amazon-style Zooming To Your WordPress Post Images

Add Amazon-style Zooming To Your WordPress Post Images

Would you like to add a zooming feature to your WordPress images, just like Amazon has on its product pages?

Are you looking for the ability to pan around a thumbnail and see a magnified version or to zoom in and out using just the mouse scroll wheel?

Then you need to integrate the elevateZoom jQuery plugin into your WordPress site. Here’s how.

Image with elevateZoom lens activated and larger image showing
Adding Amazon-style image zooming and panning is easy with elevateZoom

elevateZoom from Elevate Web in the UK is a very cool jQuery plugin indeed.

Highly configurable it provides all the options required to replicate the Amazon imaging zooming experience and more as these examples illustrate.

There are a couple of existing plugins that add elevateZoom to a WordPress site but they either use shortcodes to wrap around the image or are for galleries. I wanted something a bit more flexible, something that you can have work on an existing site without needing to update your content.

So, here’s a new elevateZoom plugin.

Using The elevateZoom Plugin

As far as possible, I’ve tried to make the plugin work with standard WordPress output. It uses a combination of server-side and client-side processing which is explained in more detail later.

The plugin won’t do anything out-of-the-box, so download it and we’ll step through setting it up.

Configuring The Settings

Installing and activating the plugin will add a new options page, elevateZoom to the Settings menu in your site’s admin interface.

Screengrab of the admin settings page for elevateZoom
The global settings can be overidden on the image itself

There are half-a-dozen settings there that will let you change such options as the zoom type, the lens size and shape, the zoom window position and the height and width of the zoom window. To find out more about the settings values and what they do, have a look at the configuration details.

You’ll notice that there are many more options than appear on the settings page. I’ve only added the most common so if you want to add more you’ll need to edit the plugin script.

The most important setting is the class. When a page is loaded, the elevateZoom functionality will be attached to all images that have the specified class. You can manually add the class to an image if you want to control exactly which images can be zoomed, or you can define a more generic class to include a number of images.

In fact, this setting can take multiple classes, just separate them with a space and don’t worry about the “.”. This means that you can add the functionality to any embedded image on most WordPress sites by specifying alignright alignleft aligncenter alignnone as the classes.

If you have a WooCommerce or MarketPress site then you can attach the functionality to your product images by specifying a common class. For example, WooCommerce’s Mystile theme adds the class attachment-shop_single to the image on a product page, so using this class will automatically attach the elevateZoom function to the image on each product page.

You must click on Update at least once to save the settings, even if you don’t change them.

Overriding The Settings In The Content

The settings page is good for configuring global behavior but what if you want to change the behavior for certain images?

The plugin allows you to override the global settings by adding the settings as attributes on the <img> tag. The name of the attributes is slightly different to their Javascript equivalents due to attributes being converted to all lower case. It gets a bit convoluted but attribute names need to be split into their individual words, separated by a hyphen and prefixed with ez-.

For example, to specify a zoomWindowHeight of 200 add ez-zoom-window-height=”200″ to the <img> tag.

The ez- prefix is so that the plugin knows this is an elevateZoom setting.

Determining The Full-Size Image To Use For Zooming

The only attribute that the plugin actually needs is data-zoom-image which is set to the URL of the full-size image.

The plugin will automatically use the URL from a parent <a> tag – the default output for WordPress if you chose to link the image to the media file when inserting into a post.

<a href=""><img class="elevateZoom alignleft wp-image-1042 size-medium" src="" alt="The Dark Knight Rises" width="198" height="300" /></a>

Otherwise, you can manually add the data-zoom-image attribute to the <img> tag.

Delving A Little Deeper

For those of you who are interested in how the plugin works, here’s a brief walkthrough.

The actually zooming functionality is provide by a jQuery plugin, which is obviously client-side, so the WordPress plugin is mainly concerned with inserting the necessary javascript into the pages and providing the Settings page.

The Settings page uses the standard Settings API. I saved a lot of time by using the WP Settings API Generator tool to provide the basic coding and just added the checks for an existing value for each option and the assigning of a default value.

Those settings are required by the client-side javascript and so are inserted into the page via the wp_localize_script function. As the Generator code automatically sets up all the options as an array, this makes providing the settings to the wp_localize_script as easy as grabbing the option via the get_option function.

This is what the output looks like in the HTML:

/* <![CDATA[ */
var ezSettings = {"ez_class":"elevateZoom","zoomType":"window","lensShape":"square","lensSize":"200","zoomWindowPosition":"1","zoomWindowHeight":"400","zoomWindowWidth":"400"};
/* ]]> */

The client-size scripts themselves are added to the output via the wp_enqueue_script function. As a jQuery plugin, the elevateZoom plugin is made dependent on jQuery loading; the custom script that adds the elevateZoom functionality is made dependent on the plugin.

The custom script (elevateZoomInit.js) is a smallish function that is attached to jQuery’s document.ready. It runs any elements that have the class specified in the elevateZoom settings in the admin interface and performs the following tasks:

  1. Sets up the data-zoom-image attribute using the parent <a> href (if available and no data-zoom-image specified on the <img>)
  2. Loops through all the attributes on the image converting any that start with ez- and adding (or replacing) the value in the settings
  3. Attaches the elevateZoom function to the image with the updated settings

All this just helps to set up the elevateZoom functionality: all the real magic, of course, is provided by the jQuery plugin itself!