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!
Truth be told, it’s difficult for a web application that doesn’t have some kind of identification, even if you don’t see it as a security measure in and of itself. The Internet is a kind of lawless land, and even on free services like Google’s, authentication ensures that abuses will...
Although data persistence is almost always a fundamental element of applications, Node.js has no native integration with databases. Everything is delegated to third-party libraries to be included manually, in addition to the standard APIs. Although MongoDB and other non-relational databases are the most common choice with Node because if you...