Sep 08 2020

Add a Magnifier for Images using jQuery

by vikas

Add a Magnifier for Images using jQuery


magnifying class on JQuery article page


What is a Magnifier for Images? An image magnifier is the zooming ability of your cursor point. This is where you can place your cursor on top of an element on the page and the image will be shown in a popup in zoom mode. 


If you are looking for zooming in and out capability, make sure to checkout: http://www.jquerybyexample.net/2010/09/how-to-zoom-image-using-jquery.html

Do you want to add a magnifier for your images? Well, jQuery is a great solution for doing so. 

Why do we want a Magnifier for Images? Adding an image magnifier allows visitors to see close ups of your images and to analyze fine details. This is especially useful for e-commerce website, art retailers, or digital goods platforms, where your users will want to inspect images closely before making a purchase. If you're using Woocommerce or Shopify for your website, of course you have the option to use plugins such as these: https://apps.shopify.com/cool-image-magnifier. However, if you're not on a CRM platform, we will show you how to implement this cool feature using JQuery!

To make a picture magnifier we will use the zoom() function.

JQuery magnifier used on woman wearing jacket and beanie hat

Building a Magnifier for Images using jQuery is quite quick and easy. However, before starting, it’s important to note that we expect some basic knowledge of HTML, CSS, and jQuery. 

First, we begin by creating the structure and page layout. 

Let’s make a standard HTML template and import the required CDNs, bootstrap, JQuery and JQuery zoom. 

We import the required CDNs in the head of the HTML document by wrapping the URLs in script tags:

<head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
  </script>
</head>

As you can see above, we import the JQuery zoom by wrapping it in script tags. 

Next, we create the body and add an image tag. You can use any image you would like, but we will be using our logo for this example. After adding the body, this is what your code should look like now:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js">
  </script>
</head>

<body>
<div>
  <b>To see the zoom in action, move cursor over this image</b>
  <div class="parent">
    <img src="https://2.bp.blogspot.com/-pFJyRNpxzz4/VXbxYaJUSfI/AAAAAAAAAQQ/iyDOPDIRFIQ/s1600/logo3.png">
  </div>
</div>
</body>
</html>

As you can see above, we add a container-fluid Bootstrap class for proper alignment and padding. To the image class, we add a parent class because we will be using this later on when we add JQuery. Of course, you can also use this class to style your element as you’d like. For the purposes of this tutorial, we won’t be styling the page- only adding the zoom functionality. 

Finally, we are now ready to add the JQuery script. The JQuery script looks like this: 


<script>
  $(document).ready(function() {

    $('.parent').css('width', $('img').width());

    $('img')
      .parent()
      .zoom({
        magnify: 4,
        target: $('.contain').get(0)
      });
  });
</script>

Confusing? Don’t worry, it will make more sense once we break down the steps here. 


First, we need to call the $(document).ready() function. A page can't be manipulated safely until the document is "ready." The great thing about JQuery is that it detects this state of readiness for you. All the code we are calling inside $( document ).ready() will only run once the DOM (Document Object Model) is ready for the code to execute. 


Inside this function, we select the element with class of ‘parent’, which would be this element:

<div class="parent">
  <img src="https://2.bp.blogspot.com/-pFJyRNpxzz4/VXbxYaJUSfI/AAAAAAAAAQQ/iyDOPDIRFIQ/s1600/logo3.png">
</div>

Once we select this div, we call .css on this element, passing in 'width', $('img').width(). What does this mean?


Well, let’s start with .css. The .css function is used to get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element. 


The first argument is the css property name, and the second argument is the value to set for the property. So here we are selecting the css width property, and setting the value to $('img').width(). 


What does $('img').width() do? This selects the img element and gets its width.


Finally, we have this beautiful piece of code here:


$('img')
  .parent()
  .zoom({
    magnify: 4
  });

$('img') selects the img element and selects it’s parent, then calls the zoom function on that. If you recall, the img element is surrounded by the div with the class of parent, which also happens to be its parent. This is what we are selecting here and calling the zoom function on. The zoom function has property magnify. 


For magnify, the value is multiplied against the full size of the zoomed image. If nothing is set for magnify, the default value is 1. This means that the zoomed image should be at 100% of its natural width and height if the value is set to 1. However, we are calling it with 4 because we are zooming at 4x the natural width and height. 


There are also other properties you can use with zoom. For example, the target property specifies the selector or DOM element that should be used as the parent container for the zoomed image. This could also be set, as well as properties like callback functions. For more information about the zoom function, visit https://www.jacklmoore.com/zoom/.  


If you are implementing this feature for an e-commerce shop, you may also like: http://www.jquerybyexample.net/2013/06/jquery-shopping-cart-ecommerce-plugin.html

You may also like:


http://www.jquerybyexample.net/2013/06/jquery-shopping-cart-ecommerce-plugin.html

Feel free to contact me for any help related to jQuery, I will gladly help you.


Feel free to contact me for any help related to jQuery, I will gladly help you.


Responsive Menu
Add more content here...