jQuery Zoom - Image magnifier glass effect

jQuery Zoom - Image magnifier glass effect

Hello colleagues.

BUP.js is a very easy to use image zoom plugin that enlarges a portion of your image with a magnifying glass effect. This plugin can be used to allow the user to view the details of a part of an image.

 

Requirements.

Include jquery library.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

Connect the BUP.js script itself

<script src="./js/BUP.js" type="text/javascript" charset="UTF-8"></script>

 

HTML code.

<html>
<head>
    <meta charset="UTF-8"/>
    <title>Image Magnifier Glass Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="BUP.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div class="container">
    <div class="wrap" style="display: flex; justify-content: center">
        <div class="left" style="margin-right: 50px">
            <img src="https://images.pexels.com/photos/12128381/pexels-photo-12128381.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
                 width="400" class="laftImg"/>
        </div>
    </div>
</div>
</body>
</html>

 

JavaScript code.

<script type="text/javascript">
    $(document).ready(function () {
        $('.laftImg').BUP('rightImg', 1);
    });
</script>

You can override the default styles for the Loupe effect.

<script type="text/javascript">
var defaults = {
    round:true,
    width: 200,
    height: 200,
    background:'#FFF',
    shadow:'0 8px 17px 0 rgba(0, 0, 0, 1)',
    border:'6px solid #FFF',
    cursor:true,
    zIndex: 999999,
}
</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