How to create image magnifier using ?
Introduction: Whenever you visit any online shopping site you must have seen the zoom effect, in which you move your cursor over the image to see an enlarged view of that portion of the image. If you want to add this feature to your website then we can easily create this.
Approaches to create: There are two methods to create an image magnifier:
- Rollover/Follow zoom effect
- Magnifying glass effect
1. Rollover/Follow zoom effect
The Rollover zoom effect is simply zooming into an image and seeing the enlarged portion of it without any transparent glass or something. We can create this effect just with pure CSS and JS.
Example 1: This example will illustrate the complete running code of Image Magnifier Using HTML5:
2. Magnifying glass effect
This effect is like you are seeing an enlarged portion of the image through the transparent glass. To create this we have used jQuery Magnify plugin. Magnify is a lightweight jQuery plugin that allows us to simply add zoom functionality to images. It is a very good feature to show product images on eCommerce websites or if you want people to zoom into an image on your website without generating extra overlays or popup windows that can obscure your text.
How to use it:
Step 1: Load the magnify.css in the header and the jquery.magnify.js at the end of the body tag but after the jQuery library.
<script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js” integrity=”sha512-YKxHqn7D0M5knQJO2xKHZpCfZ+/Ta7qpEHgADN+AkY2U2Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>
Step 2: Insert the small image into your webpage. The data-magnify-src attribute can be used to include the URL of the larger image.
<img src=”https://media.geeksforgeeks.org/wp-content/uploads/20220322220850/gfg.jpg” class=”zoom” data-magnify-src=”https://media.geeksforgeeks.org/wp-content/uploads/20220316232110/gfglarge-300×300.jpg” />
Example 2: This example will illustrate the complete running code of Image Magnifier Using HTML5 with jQuery: