Zoom blowup.js - Zoom blowup plugin with magnifying glass

Zoom blowup.js - Zoom blowup plugin with magnifying glass

Hello colleagues.

In today's article, we'll show you a plugin that scales images with a jQuery magnifying glass, and allows you to magnify a specified image with a custom magnifying lens. The plugin is very easy to use.

 

Requirements.

Include the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Include blowup.min.js plugin

<script src="blowup.min.js"></script>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blowup</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="blowup.min.js"></script>
</head>
<body>
<img src="zoom_image.png">
</body>
</html>

 

CSS code.

.demo-img {
    width: 400px;
    height: 300px;
}

 

JavaScript code.

<script type="text/javascript">
    $(document).ready(function(){
        $("img").blowup({
            round      :true,
            width      : 200,
            height     : 200,
            background :"#FFF",
            shadow     :"0 8px 17px 0 rgba(0, 0, 0, 0.2)",
            border     :"6px solid #FFF",
            cursor     :true,
            zIndex     : 999999,
            scale      : 1,
            customClasses :"",
        });
    });
</script>

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB