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!
Using Wordpress? Get our lightening fast Wordpress Optimised Hosting from £1.60 / month
Do you need to increase the memory limit in WordPress? Getting an error about memory Exhausted? The memory limit is one of the most common WordPress errors as the default limit of memory in WordPress is only set to 64mb! But there’s good news! The Memory Exhausted error is one...
A vulnerability has been discovered in the “All In One WordPress Migration” WordPress plugin. All versions earlier than, and including 6.97 contain a vulnerability which allows Cross-Site Scripting (XSS).With over 2 million active installations, this vulnerability has the potential to be high impact, however, this is lessened by the nature...
HostPresto will be launching a European point of presence in the coming weeks, specifically in Amsterdam. For customers needing their data located within the EU still please contact support to request migration to this location with ticket subject ‘EU Migration’. We will ensure this is actioned well before the Brexit...