|
|
+class TinyZoom{constructor(e){let t=document.querySelectorAll(e);t.forEach(e=>{e.style.cursor="pointer",e.addEventListener("click",()=>{this.makeFullscreen(e)}),e.addEventListener("touchstart",t=>{t.preventDefault(),this.makeFullscreen(e)})})}makeFullscreen(e){let t=document.createElement("div");t.classList.add("fullscreen-image");let i=document.createElement("canvas"),n=i.getContext("2d");i.width=e.width,i.height=e.height,n.drawImage(e,0,0,e.width,e.height);var l=Math.max(document.documentElement.clientWidth||0,window.innerWidth||0),a=Math.max(document.documentElement.clientHeight||0,window.innerHeight||0);if(l>0)var d=e.width>l?l/e.width*.75:1;if(a>0)var r=e.height>a?a/e.height*.75:1;t.appendChild(i),document.body.appendChild(t),t.addEventListener("click",e=>{e.target===t&&t.remove()}),t.addEventListener("wheel",e=>{e.target===t&&e.preventDefault()});let s,h,o,c=1;function m(t){c*=t,i.style.transform=`scale(${c})`,n.clearRect(0,0,i.width,i.height),n.drawImage(e,0,0,e.width,e.height)}i.style.position="absolute",i.style.left=l/2-e.width/2+"px",i.style.top=a/2-e.height/2+"px",i.style.cursor="move",i.addEventListener("wheel",e=>{e.preventDefault();let t=e.deltaY>0?.9:1.1;m(t)}),i.addEventListener("mousedown",e=>{s=e.pageX-i.offsetLeft,h=e.pageY-i.offsetTop,o=!0}),i.addEventListener("mousemove",e=>{if(o){let t=e.pageX-s,n=e.pageY-h;i.style.left=`${t}px`,i.style.top=`${n}px`}}),i.addEventListener("mouseup",()=>{o=!1}),i.addEventListener("dblclick",e=>{m(e.shiftKey?.5:2)});var v=Math.min(1,d,r);1!=v&&m(v)}}window.addEventListener("load",()=>{new TinyZoom(".TinyZoom")});
|
Belle Aerni