Image scaling with JavaScript - mooZoom

  • Last updated: Nov 3, 2023
  • Views: 436
  • Author: Admin
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

YII2 defaultRoute - How to change default controller in template

YII2 defaultRoute - How to change default controller in template

Pure HTML/CSS search bar

Pure HTML/CSS search bar

HTML/CSS - Expandable Searchbar Animation

HTML/CSS - Expandable Searchbar Animation