Масштабування зображення на JavaScript - mooZoom

Масштабування зображення на JavaScript - mooZoom

Колеги всім привіт.

mooZoom — це простий плагін і jQuery, що настроюється, для збільшення зображень на сторінці вашого сайту. Плагін написаний на чистому jQuery та CSS і не залежить від жодних інших бібліотек. Плагін відображає ефект збільшувального скла на мініатюрі зображення при наведенні курсору та відображає збільшене зображення (початкове зображення).

 

Вимоги.

Підключити бібліотеку Jquery.

<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>

 

HTML Код.

<!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 Код.

.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 Код.

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);
});

 

Дякую всім, я сподіваюся що вам моя стаття хоч чимось допомогла.

 

СХОЖІ СТАТТІ

jQuery карусель з ефектом збільшувального скла
jQuery карусель з ефектом збільшувального скла
WEB
JQuery плагін для збільшення зображення зі збільшувальним склом
JQuery плагін для збільшення зображення зі збільшувальним склом
WEB
JQuery - Галерея зображень зі збільшенням під час наведення
JQuery - Галерея зображень зі збільшенням під час наведення
WEB