magnifier demo

index.html

<div class="magnifier-demo">
	<div class="magnifier-demo__image-wrapper">
		<img id="magnifier-img" src="https://static.pexels.com/photos/1188/city-landmark-lights-night.jpg"> 
		<span class="magnifier-demo__zoomer"></span>
	</div>
	<div class="magnifier-demo__zoom-preview"></div>
</div>

main.js

const img = document.querySelector('#magnifier-img');
const preview = document.querySelector('.magnifier-demo__zoom-preview');
const zoomer = document.querySelector('.magnifier-demo__zoomer');
const imgDim = {};

if (img.complete){
	setupMagnifier();
} else {
	img.addEventListener('load', setupMagnifier);
}
function setupMagnifier(){
	// set preview bg
	preview.style.background = `url('${img.src}') no-repeat center center`;
	
	// set preview height
	preview.style.height = img.offsetHeight + 'px';

	const previewR = preview.offsetWidth / preview.offsetHeight;

	// set zoomer dimensions
	const zoomerW = 50;
	zoomer.style.width = zoomerW + 'px';
	zoomer.style.height = zoomerW / previewR + 'px';

	// set bg size for preview div
	const sizeRatio = img.offsetWidth / preview.offsetWidth;
	preview.style.backgroundSize = `${img.naturalWidth / sizeRatio}px ${img.naturalHeight / sizeRatio}px`;

	// cache dimensions
	imgDim.w = img.offsetWidth;
	imgDim.h = img.offsetHeight;

	// init displace
	displace(zoomer, {
		constrain: true,
		onMouseMove: updatePreview
	});

	// update preview
	updatePreview(zoomer);
}

function updatePreview(el){
	const x = el.offsetLeft / (imgDim.w - el.offsetWidth) * 100;
	const y = el.offsetTop / (imgDim.h - el.offsetHeight) * 100;
	
	preview.style.backgroundPosition = `${x}% ${y}%`;
}

style.scss

.magnifier-demo {
	width: 600px;
	&__image-wrapper {
		width: 400px;
		position: relative;
		display: inline-block;
	}

	img {
		height: auto;
		max-width: 100%;
		vertical-align: middle;
		display: block;
	}

	&__zoomer {
		display: inline-block;
		position: absolute;
		left: 245px;
		top: 102px;
		background: rgba(255,255,255,0.4);
		cursor: move;
		border: 1px solid rgba(255, 255, 255, 0.7);
	}

	&__zoom-preview {
		display: inline-block;
		background: yellow;
		width: 200px;
		float: right;
		position: relative;
		height: 100%;

		border-left: 3px solid white;
		box-sizing: border-box;
	}
}