Skip to content

Instantly share code, notes, and snippets.

@catc
Last active May 23, 2022 02:46
Show Gist options
  • Save catc/efd9afa98eae411619a898059f8b35b5 to your computer and use it in GitHub Desktop.
Save catc/efd9afa98eae411619a898059f8b35b5 to your computer and use it in GitHub Desktop.
magnifier demo
<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>
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}%`;
}
.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;
}
}
@mjdosanjh
Copy link

this is not working on my pc is there are links on the head tag also

@catc
Copy link
Author

catc commented Mar 23, 2020

The html is just a snippet. You can also check the code in the repository for more info.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment