4th July, 2018 | Blog |

How To Add A Magnifying Zoom To Images In WordPress

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.

Get Wordpress Hosting

Would you like to add an Amazon-like magnifying zoom to your images in WordPress? Being able to zoom in on images allows users to see things that they would not usually see in a normal sized image, whilst also making your website appear more attractive and professional. Customers and visitors alike will appreciate being able to zoom in on the finer details within images and an attractive zoom feature can really help to sell products if you're running an e-commerce store. In this article, we'll show you how to easily add a magnifying zoom for images in WordPress.

Adding A Magnifying Zoom

The first thing you will need to do is install and activate the WP Image Zoom plugin.

Upon activation, you'll need to visit the WP Image Zoom page within your WordPress admin area. From here, you can manage the zoom settings for your images.

In the General Settings tab, you can enable features like zoom on WooCommerce product images, thumbnails, mobile devices, attachment pages, category pages, and more. It also allows you to remove the lightbox, so your users can smoothly zoom images.

Once you're done adjusting the settings on this page, don’t forget to click on the Save Changes button. Next, you need to visit the Zoom Settings tab. Here, it will present you with 4 easy steps to add a magnifying zoom.

The first step is to select the shape of the lens to zoom images. You can choose from a circle, square, and zoom window lens shape.

After choosing your lens, head to the next step and preview an image with the selected lens shape to see how it works. The plugin comes with a preview image that you can use to test your changes.

In the next step, you can select cursor type, animation easing effect, enable the zoom on mouse hover or mouse click, and define a zoom level.  It should be noted that some of these features are only available for the pro version of the plugin.

To change settings like lens size, lens colour, lens border options and more, head over to the Lens tab.  These settings are only effective if you've selected the circle or square lens in Step 1 however.

Next, you can visit the Zoom Window configuration tab. This tab is enabled only if you selected the Zoom Window Lens in Step 1. From here, you can change the width and height of zoom window, positioning, distance from the main image, borders, and more. It's from this tab that you can add things like custom text to your images as well, along with a range of options such as size, colour and alignment.

To finish, make sure you save your changes and don't forget that you can preview your image to see how the magnifier will work!

Turning On The Magnifying Zoom For Images In Pages And Posts

If you wish to enable the magnifying zoom for images within pages or posts then you will have to do it manually once you have inserted an image into the editor.

Simply add an image into the editor and then click on it. Once highlighted, just click on the magnifying zoom icon within the editor toolbar and the zoom will be applied to your image.

Be sure to preview your post to double check that the zoom works, and remember that everytime you add an image, you'll have to click the magnifying zoom icon to apply it!

We hope this article has made the process of applying an attractive and engaging zoom lens to your website's images easy!

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.

Get Wordpress Hosting