Author: | creme |
---|---|
Views Total: | 3,230 views |
Official Page: | Go to website |
Last Update: | September 2, 2019 |
License: | MIT |
Preview:

Description:
A tiny script that applies a magnifying glass effect to an image and allows the user to zoom in/out the image with mouse wheel.
How to use it:
Insert the thumbnail and original image to the page.
<div class="image"> <a href="original.jpg" target="_blank"> <img src="thumbnail.jpg" alt=""> </a> </div>
Create the HTML for the magnifying glass effect.
<div class="zoom"> <img class="zoom-image" src="" alt=""> </div>
The required CSS/CSS3 styles for the magnifying glass effect.
.image { max-width: 100%; cursor: none; } .image a { cursor: none; } .image img { max-width: 100%; } .zoom { width: 14rem; height: 14rem; background: #fff; border-radius: 50%; position: absolute; pointer-events: none; transition: opacity 0s linear .25s, -webkit-transform .25s ease; transition: transform .25s ease, opacity 0s linear .25s; transition: transform .25s ease, opacity 0s linear .25s, -webkit-transform .25s ease; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; overflow: hidden; } .zoom.show { -webkit-transform: scale(1); transform: scale(1); opacity: 1; transition: opacity 0s linear, -webkit-transform .25s ease; transition: transform .25s ease, opacity 0s linear; transition: transform .25s ease, opacity 0s linear, -webkit-transform .25s ease; } .zoom .zoom-image { position: absolute; left: 0; top: 0; }
The script to enable the Magnify And Zoom functionalities on the image.
const image = document.querySelectorAll('.image')[0]; const zoom = document.querySelectorAll('.zoom')[0]; const zoomImage = document.querySelectorAll('.zoom-image')[0]; let clearSrc; let zoomLevel = 1; image.addEventListener('mouseover', function () { zoom.classList.add('show'); clearTimeout(clearSrc); let originalImage = this.getElementsByTagName('a')[0].getAttribute('href'); zoomImage.setAttribute('src', originalImage); }); image.addEventListener('mouseout', function () { // remove scaling to prevent non-transition zoom.style.transform = null; zoomLevel = 1; zoom.classList.remove('show'); clearSrc = setTimeout(() => { zoomImage.setAttribute('src', ''); }, 250); }); image.addEventListener('mousemove', function (e) { let posX = e.clientX, posY = e.clientY; zoom.style.top = `${posY - zoom.offsetHeight / 2}px`; zoom.style.left = `${posX - zoom.offsetWidth / 2}px`; let percX = (posX - this.offsetLeft) / this.offsetWidth, percY = (posY - this.offsetTop) / this.offsetHeight; let zoomLeft = -percX * zoomImage.offsetWidth + zoom.offsetWidth / 2, zoomTop = -percY * zoomImage.offsetHeight + zoom.offsetHeight / 2; zoomImage.style.left = `${zoomLeft}px`; zoomImage.style.top = `${zoomTop}px`; }); image.addEventListener('wheel', e => { e.deltaY > 0 ? zoomLevel-- : zoomLevel++; if (zoomLevel < 1) zoomLevel = 1; if (zoomLevel > 5) zoomLevel = 5; console.log(`zoom level: ${zoomLevel}`); zoom.style.transform = `scale(${zoomLevel})`; });