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 theWP Image Zoomplugin.
Upon activation, you'll need to visit the WP Image Zoompage within your WordPress admin area. From here, you can manage the zoom settings for your images.
In theGeneral Settingstab, you can enable features like zoom onWooCommerceproduct 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 theSave Changesbutton. Next, you need to visit theZoom Settingstab. 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 theZoom 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!
If you find your cPanel disk space filling up, or an email address has hit its disk space quota, cPanel has a helpful built in Email Disk Usage tool. This will provide you with a simple to understand breakdown of how much disk space each folder for a particular email...
Although WHM will normally automatically keep itself up to date, you may want to manually check for server updates / push through an update that is pending, or it may be that you have automatic updates switched off on your cPanel server. In this guide we will show you how...
You may sometimes need to manually adjust the PHP settings on your cPanel server – for example if a site is hitting the PHP memory, or file size upload limit. WHM allows you to quickly change the settings of any PHP version installed on the server when needed, using the...