How to Create a Magnifying Lens of Image using jQuery and Magnify.js

Submitted by nurhodelta_17 on Tuesday, April 3, 2018 - 21:26.

Getting Started

First, we need the jQuery library and the Magnify CSS and JS. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below: For jQuery For Magnify ->Github Repo

Displaying our Image

Next, we display our image that we want to add the magnify functionality. Take note that in order for this function to work, we will be using two images with same aspect ratio, one smaller and one larger. In this tutorial, I've also included sample images in the downloables that you can use. Create a new file, name it as index.html and paste the codes below.

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>How to Create a Magnifying Lens of Image using jQuery and Magnify.js</title>
        <link rel="stylesheet" type="text/css" href="magnify/magnify.min.css">
        <style type="text/css">
                /*resize magnifying lens*/
                .magnify > .magnify-lens {
                        width: 100px;
                        height: 100px;
                }
        </style>
</head>
<body>
<img src="pc_smaller.jpg" class="zoom" data-magnify-src="pc_larger.jpg">
 
<script src="jquery.min.js"></script>
<script src="magnify/magnify.min.js"></script>
<script>
        $(document).ready(function() {
                $('.zoom').magnify();
        });
</script>
</body>
</html>

Note: We have called the magnify() function in our script using.

$(document).ready(function() {
       $('.zoom').magnify();
});

That ends this tutorial. Happy Coding :)

Add new comment

72 views