How to Create Magnifying Glass to Zoom the Image

Submitted by alpha_luna on Thursday, August 11, 2016 - 12:19.

In this tutorial, we are going to learn how to create Magnifying Glass to Zoom the Image. This simple project, created using magnify.js. It is easy and simple to use kind of jQuery plugin to have a magnifying glass effect in the image. You can use this work to magnify the image on your E-commerce websites project, to have the zoom effect to the image.

How to create

Copy and paste the link to your HEAD tag of your created page to load the jQuery plugin that we have.

<link href="jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="dist/css/magnify.css" rel="stylesheet" type="text/css">
<script src="jquery-1.11.1.min.js"></script>
<script src="dist/js/jquery.magnify.js"></script>
 
<style type="text/css">
body {
        margin:auto;
        width:500px;
}
.magnify {
        width:480px;
        height:852px;
        margin:30px auto;
}
h1 {
        color:blue;
        margin-top:150px;
        text-align:center;
}
</style>

Create a simple markup to insert the simple image into your web page.

<img src="2.jpg" alt="" width="480" height="852" class="magnify-image" data-magnify-src="1.jpg">

After creating markup for the image, let’s code the simple script to load the magnify effect in the image to get the zoom effect.

<script>
$(document).ready(function() {
  // Initiate magnification powers
  $('img').magnify();
});
</script>

Output

The cursor hover to the image to have a zoom effect. Result

That's it, kindly click the "Download Code" button below for the full source code. Enjoy coding. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

271 views