Jquery - Увеличение изображения продукта при наведении

Jquery - Увеличение изображения продукта при наведении

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

Простой плагин jquery для увеличения изображения, который добавляет эффект масштабирования к любым изображениям у вас на сайте. Рекомендуем использовать на сайтах электронной коммерции и изображениям в блогах.

 

Требования.

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

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

Подключить сам плагин.

<script type="text/javascript" src="zoom.js"></script>

 

HTML Код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Image Zoom On Hover</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script type="text/javascript" src="zoom.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Product Image Zoom On Hover</h1>
<div class="cn f a j">
    <div class="wp f">
        <aside>
            <div class="zoom">
                <div class="original">
                    <img src="image1.png" id="target">
                </div>
                <div class="viewer">
                    <img src="image1.png">
                </div>
                <div class="magnifier"></div>
            </div>
        </aside>
    </div>
</div>
</body>
</html>

 

CSS Код.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.f {
    display: flex;
}
.a {
    align-items: center;
}
.j {
    justify-content: center;
}
.cn {
    height: 100vh;
}
.wp {
    --t: 900px;
    width: var(--t);
}
.wp aside {
    width: 50%;
}
.wp aside:last-child {
    padding: 0 0 0 10px;
}
.mgt {
    margin-top: 10px;
}
/* Zoom styles */
.zoom, .original {
    position: relative;
}
.zoom {
    display: inline-block;
}
.original {
    cursor: crosshair;
}
#target {
    width: calc(var(--t) / 2);
}
.zoom .viewer {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.zoom .viewer img {
    position: absolute;
}
.magnifier {
    position: absolute;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
}
.magnifier, .viewer {
    display: none;
}
.original:hover ~ div {
    display: block;
}
.original::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

 

JavaScript Код.

$(document).ready(function(){
    var l = $('#target').zoom(5);
    $('input[type="range"]').on('change', function () {
        l.setZoom(this.value);
    });
});

 

Всем спасибо, я надеюсь что вам моя статья хоть чем-то помогла.

 

ПОХОЖИЕ СТАТЬИ

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