Jan 20, 2026
/* =============================================================================
Image Zoom JS v0.0.1 | MIT License | https://github.com/alecrios/image-zoom-js
============================================================================= */
'use strict';
class ImageZoom {
constructor(image) {
// Image
this.image = image;
// Backdrop
this.backdrop = document.querySelector('[data-zoom-backdrop]');
if (this.backdrop === null) {
this.backdrop = document.createElement('div');
this.backdrop.setAttribute('data-zoom-backdrop', '');
document.body.appendChild(this.backdrop);
}
// Pass `this` through to methods
this.zoomImage = this.zoomImage.bind(this);
this.resetImage = this.resetImage.bind(this);
this.resetImageComplete = this.resetImageComplete.bind(this);
// Add click event handler
this.image.addEventListener('click', this.zoomImage);
}
zoomImage() {
// Prevent an image from zooming while another is already active
if (this.backdrop.getAttribute('data-zoom-active') === 'true') return;
// Declare zoom function to be active
this.backdrop.setAttribute('data-zoom-active', 'true');
// Handle event listeners
this.image.removeEventListener('click', this.zoomImage);
this.image.addEventListener('click', this.resetImage);
this.backdrop.addEventListener('click', this.resetImage);
document.addEventListener('keyup', this.resetImage);
window.addEventListener('scroll', this.resetImage);
window.addEventListener('resize', this.resetImage);
// Fade in backdrop
this.backdrop.setAttribute('data-zoom-backdrop', 'active');
// Set image style
this.image.setAttribute('data-zoom-image', 'active');
// Set image transform
this.imageBCR = this.image.getBoundingClientRect();
var scale = Math.min(
window.innerWidth / this.imageBCR.width,
window.innerHeight / this.imageBCR.height
);
var translateX =
(window.innerWidth - this.imageBCR.width) / 2 - this.imageBCR.left;
var translateY =
(window.innerHeight - this.imageBCR.height) / 2 - this.imageBCR.top;
this.image.style.transform = `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`;
}
resetImage() {
// Handle event listeners
window.removeEventListener('resize', this.resetImage);
window.removeEventListener('scroll', this.resetImage);
document.removeEventListener('keyup', this.resetImage);
this.backdrop.removeEventListener('click', this.resetImage);
this.image.removeEventListener('click', this.resetImage);
this.image.addEventListener('click', this.zoomImage);
// Fade out backdrop
this.backdrop.setAttribute('data-zoom-backdrop', '');
// Reset image style
this.image.addEventListener('transitionend', this.resetImageComplete);
// Reset image transform
this.image.style.transform = null;
}
resetImageComplete() {
// Handle event listeners
this.image.removeEventListener('transitionend', this.resetImageComplete);
// Declare zoom function to be not active
this.backdrop.setAttribute('data-zoom-active', 'false');
// Reset image style
this.image.setAttribute('data-zoom-image', '');
}
}
Change MS Edge start page
1. Click "..."
2. Click "Settings"
3. Click "Start, home, and new tab page"
4. Click "Open custom sites"
5. Click "Add site"
6. Click "example.com"
Enter the desired URL
7. Click "Add"
Close and reopen MS Edge