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.

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.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css” integrity=”sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6lK3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”/>

<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.w3wiki.org/wp-content/uploads/20220322220850/gfg.jpg” class=”zoom” data-magnify-src=”https://media.w3wiki.org/wp-content/uploads/20220316232110/gfglarge-300×300.jpg” />

Step 3: Call the .magnify() function. Ensure that this occurs after the two essential JavaScript files from Step 1 have been loaded. 

<script>
$(document).ready(function() {
       $(‘.zoom’).magnify();
});
</script>

Example 2: This example will illustrate the complete running code of Image Magnifier using HTML5 with jQuery.

Output:

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.

There are two methods to create an image magnifier: