hoverzoom-js/dist/hoverzoom.esm.min.js

A lightweight hover-to-zoom image magnifier plugin for web

class HoverZoom{constructor(e={}){this.options={classNames:{container:"hoverzoom",image:"hoverzoom-image",zoomedImage:"hoverzoom-zoom",magnifier:"hoverzoom-magnifier",magnifierRound:"hoverzoom-magnifier--round",magnifierImage:"hoverzoom-magnifier--image"},position:"right",type:"outside",largeImage:"",blur:!1,grayscale:!1,...e},this.isSafari=/constructor/i.test(window.HTMLElement)||"[object SafariRemoteNotification]"===(!window.safari||"undefined"!=typeof safari&&window.safari.pushNotification).toString()}init(){const e=document.getElementsByClassName(this.options.classNames.container);for(let t=0;t<e.length;t++)this.iteration=t,this.currentContainer=e[t],this.applyHoverZoom()}applyHoverZoom(){const{image:e}=this.options.classNames;this.currentImageEl=this.currentContainer.querySelector(`.${e}`),this.currentImageEl.setAttribute("id",`${e}-${this.iteration}`),this.options.largeImage=this.currentImageEl.dataset.largeImage?this.currentImageEl.dataset.largeImage:this.currentImageEl.src;"outside"===(this.currentImageEl.dataset.type||this.options.type)?this.outsideZoom():this.insideZoom(),this.addMouseListener()}outsideZoom(){const{zoomedImage:e,magnifier:t,magnifierImage:i}=this.options.classNames;this.zoomedElement=document.createElement("DIV"),this.zoomedElement.classList.add(e),this.zoomedElement.setAttribute("id",`${e}-${this.iteration}`),this.zoomedElement.style.setProperty("background-image",`url('${this.options.largeImage}')`),this.zoomedElement.style.setProperty("background-size",`${4*this.currentImageEl.offsetWidth}px ${4*this.currentImageEl.offsetHeight}px`);const s=this.currentImageEl.dataset.position||this.options.position;this.currentContainer.style.setProperty("flex-direction","right"===s?"row":"column"),this.attachZoomedImage(),this.magnifierElement=document.createElement("DIV"),this.magnifierElement.classList.add(t),this.magnifierElement.setAttribute("id",`${t}-${this.iteration}`),this.magnifierImageElement=document.createElement("IMG"),this.magnifierImageElement.classList.add(i),this.magnifierImageElement.setAttribute("id",`${i}-${this.iteration}`),this.magnifierImageElement.setAttribute("src",this.options.largeImage),this.magnifierImageElement.style.setProperty("height",`${this.currentImageEl.offsetHeight}px`),this.magnifierImageElement.style.setProperty("width",`${this.currentImageEl.offsetWidth}px`),this.magnifierElement.appendChild(this.magnifierImageElement),this.currentContainer.appendChild(this.magnifierElement);const o=this.magnifierElement.offsetHeight*this.currentImageEl.offsetWidth/this.currentImageEl.offsetHeight;this.magnifierElement.style.setProperty("width",`${o}px`)}attachZoomedImage(){this.zoomedElement.style.setProperty("height",`${this.currentImageEl.offsetHeight}px`),this.zoomedElement.style.setProperty("width",`${this.currentImageEl.offsetWidth}px`);"right"===(this.currentImageEl.dataset.position||this.options.position)?this.zoomedElement.style.setProperty("margin-left","6px"):this.zoomedElement.style.setProperty("margin-top","6px"),this.currentContainer.appendChild(this.zoomedElement)}insideZoom(){const{magnifier:e,magnifierImage:t,magnifierRound:i}=this.options.classNames;this.magnifierElement=document.createElement("DIV"),this.magnifierElement.classList.add(e),this.magnifierElement.classList.add(i),this.magnifierElement.setAttribute("id",`${e}-${this.iteration}`),this.magnifierImageElement=document.createElement("DIV"),this.magnifierImageElement.classList.add(t),this.magnifierImageElement.setAttribute("id",`${t}-${this.iteration}`),this.magnifierImageElement.style.setProperty("background-image",`url('${this.options.largeImage}')`),this.magnifierImageElement.style.setProperty("background-size",`${4*this.currentImageEl.offsetWidth}px ${4*this.currentImageEl.offsetHeight}px`),this.magnifierImageElement.style.setProperty("height",`${this.currentImageEl.offsetHeight}px`),this.magnifierImageElement.style.setProperty("width",`${this.currentImageEl.offsetWidth}px`),this.magnifierElement.appendChild(this.magnifierImageElement),this.currentContainer.appendChild(this.magnifierElement)}addMouseListener(){const{image:e,magnifier:t,magnifierImage:i,zoomedImage:s}=this.options.classNames,o=document.getElementById(`${i}-${this.iteration}`),r=document.getElementById(`${t}-${this.iteration}`),{offsetHeight:a,offsetWidth:n}=r,m=document.getElementById(`${s}-${this.iteration}`),l=document.getElementById(`${e}-${this.iteration}`),g=l.dataset.type||this.options.type;this.currentImageEl.addEventListener("mousemove",e=>{let t="opacity(0.8)";(l.dataset.blur||this.options.blur)&&(t+=" blur(2px)"),(l.dataset.grayscale||this.options.grayscale)&&(t+=" grayscale(100%)"),l.style.setProperty("filter",t),r.style.setProperty("opacity",1),"outside"===g&&m.style.setProperty("opacity",1);const i=e.offsetX?e.offsetX:e.pageX-l.offsetLeft,s=e.offsetY?e.offsetY:e.pageY-l.offsetTop;let h,d;"outside"===g?(m.style.setProperty("background-position-x",3*-i+"px"),m.style.setProperty("background-position-y",3*-s+"px"),h=.5*n,d=-.52*a):(o.style.setProperty("background-position-x",3*-i+"px"),o.style.setProperty("background-position-y",3*-s+"px"),h=.5*n,d=-.51*a),r.style.setProperty("transform",`translate(${e.offsetX-h}px, ${e.offsetY+d}px)`),o.style.setProperty("transform",`translate(${-e.offsetX+n/2-1}px, ${-e.offsetY+a/2}px)`)}),this.currentImageEl.addEventListener("mouseout",()=>{l.style.setProperty("filter","unset"),r.style.setProperty("opacity",0),"outside"===g&&m.style.setProperty("opacity",0)})}}export{HoverZoom as default};