Масштабирования изображений на 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