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