![\"Image](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-27-at-9.25.10-PM.png\")
<\/a>elevateZoom<\/a> from Elevate Web in the UK is a very cool jQuery plugin indeed.<\/p>\n Highly configurable it provides all the options required to replicate the Amazon imaging zooming experience and more as these examples illustrate<\/a>.<\/p>\n 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\u00a0for galleries. I wanted something a bit more flexible, something that you can have work on an existing site without needing to update your content.<\/p>\n So, here’s a new elevateZoom plugin.<\/p>\n 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.<\/p>\n The plugin won’t do anything out-of-the-box, so\u00a0download it<\/a>\u00a0and we’ll step through setting it up.<\/p>\n Installing and activating the plugin will add a new options page, elevateZoom<\/em> to the Settings<\/em>\u00a0menu in your site’s admin interface.<\/p>\n 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<\/a>.<\/p>\n You’ll notice that there are many more options than appear on the settings page. I’ve only added the most common so\u00a0if you want to add more you’ll need to edit the plugin script.<\/p>\n The most important setting is the class<\/em>. 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.<\/p>\n 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<\/em> as the classes.<\/p>\n 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<\/em>\u00a0to the image on a product page, so using this class will automatically attach the elevateZoom function to the image on each product page.<\/p>\n You must click on Update<\/strong> at least once to save the settings, even if you don’t change them.<\/p>\n The settings page is good for configuring global behavior but what if you want to change the behavior for certain images?<\/p>\n The plugin allows you to override the global settings by adding the settings as attributes on the <img><\/em> 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\u00a0attribute names need to be split into their individual words, separated by a hyphen and prefixed with ez-<\/em>.<\/p>\n For example, to specify a zoomWindowHeight<\/em> of 200<\/em> add ez-zoom-window-height=”200″<\/em> to the <img><\/em> tag.<\/p>\n The ez-<\/em> prefix is so that the plugin knows this is an elevateZoom<\/em> setting.<\/p>\n The only attribute that the plugin actually needs is data-zoom-image<\/em> which is set to the URL of the full-size image.<\/p>\n The plugin will automatically use the URL from a\u00a0parent <a><\/em> tag –\u00a0the default output for WordPress if you chose to link the image to the media file when inserting into a post.<\/p>\n <a href=”http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/the-dark-knight-rises.jpg”><img class=”elevateZoom alignleft wp-image-1042 size-medium” src=”http:\/\/www.test.dev\/wp-content\/uploads\/2013\/03\/the-dark-knight-rises-198×300.jpg” alt=”The Dark Knight Rises” width=”198″ height=”300″ \/><\/a><\/p>\n <\/p>\n Otherwise, you can manually add the data-zoom-image<\/em> attribute to the <img><\/em> tag.<\/p>\n\n For those of you who are interested in how the plugin works, here’s a brief walkthrough.<\/p>\n 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.<\/p>\n The Settings page uses the standard Settings API. I saved a lot of time by using the WP Settings API Generator tool<\/a> to provide the basic coding and just added the checks for an existing value for each option and the assigning of a default value.<\/p>\n Those settings are required by the client-side javascript and so are inserted into the page via the wp_localize_script<\/a> 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.<\/p>\n This is what the output looks like in the HTML:<\/p>\nUsing The elevateZoom Plugin<\/h2>\n
Configuring The Settings<\/h3>\n
<\/a>Overriding The Settings In The Content<\/h3>\n
Determining The Full-Size Image To Use For Zooming<\/h3>\n
<\/code><\/p>\nDelving A Little Deeper<\/h2>\n