(function() {var zoomBoxes = document.querySelectorAll('.detail-view');
zoomBoxes.forEach(function(image) {var imageCss = window.getComputedStyle(image, false),
imageUrl = imageCss.backgroundImage .slice(4, -1).replace(/['"]/g, '');
var imageSrc = new Image(); imageSrc.onload = function() {var imageWidth = imageSrc.naturalWidth, imageHeight = imageSrc.naturalHeight, ratio = imageHeight /imageWidth;
var percentage = ratio * 100 + '%'; image.style.paddingBottom = percentage; image.onmousemove = function(e) {
var boxWidth = image.clientWidth, x = e.pageX - this.offsetLeft, y = e.pageY - this.offsetTop, 
xPercent = x / (boxWidth / 100) + '%', yPercent = y / (boxWidth * ratio / 100) + '%';
Object.assign(image.style, {backgroundPosition: xPercent + ' ' + yPercent, backgroundSize: imageWidth + 'px' });};
image.onmouseleave = function(e) {Object.assign(image.style, {backgroundPosition: 'center', backgroundSize: 'cover' });};}
imageSrc.src = imageUrl;});})();