Image scaling with JavaScript - mooZoom

Image scaling with JavaScript - mooZoom

Hello colleagues.

mooZoom is a simple and customizable jQuery plugin for zooming in on images on your website page. The plugin is written in pure jQuery and CSS and does not depend on any other libraries. The plugin displays a magnifying glass effect on the image thumbnail on hover and displays the enlarged image (original image).

 

Requirements.

Include jquery library.

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

Connect the plugin itself.

<script type="text/javascript" src="jQuery-mooZoom-1.0.0.js"></script>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zooming images</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="jQuery-mooZoom-1.0.0.js"></script>
    <script src="script.js"></script>
</head>
<body>
<div class="container">
    <h1>mooZoom jQuery Image Zoom</h1>
    <img class="imgZoom" alt="" src="images/zoom_300_400.png" ref="images/zoom_900_1600.png"/>
</div>
</body>
</html>

 

CSS code.

.container{
    margin: 0 auto;
    width: 35%;
}
.container h1{
    text-align: center;
}
.mooZoom-big-detail {
    -moz-box-shadow: 0px 0px 10px #000;
    -webkit-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
}

 

JavaScript code.

var options = {
    zoom: {
        width: 100,
        height: 100,
        zIndex: 600
    },
    overlay: {
        opacity: 0.65,
        zIndex: 500,
        backgroundColor: '#000000',
        fade: true
    },
    detail: {
        zIndex: 600,
        margin: {
            top: 0,
            left: 10
        },
        fade: true
    }
};
jQuery(document).ready(function() {
    jQuery('.imgZoom').mooZoom(options);
});

 

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