Jquery - Zoom product image on hover

  • Last updated: Nov 3, 2023
  • Views: 760
  • Author: Admin
Jquery - Zoom product image on hover

Hello colleagues.

A simple jquery image zoom plugin that adds a zoom effect to any image on your site. Recommended for use on e-commerce sites and blog images.

 

Requirements.

Include jquery library.

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

Connect the plugin itself.

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

 

HTML code.

<!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 code.

* {
    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 code.

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

 

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