Silky Smooth Image Zoom and Lightbox

<script src="https://cdn.jsdelivr.net/npm/smooth-zoom/dist/zoom.browser.js"></script>

<img src="https://source.unsplash.com/Y9ksK2aKzkU/1200x800" class="zoomable" style="width:50%;" />

Zoom(".zoomable",{
    background: "auto"
  });

Silky Smooth Image Zoom and Lightbox Demo

View Demo Full Screen View Demo New Tab

Silky Smooth Image Zoom and Lightbox Code

HTML

<img src="https://source.unsplash.com/Y9ksK2aKzkU/1200x800" class="zoomable" style="width:50%;" />
  <img src="https://source.unsplash.com/a2TsN86vay0/800x1200" class="zoomable" style="width:50%;"  />

Scripts

<script src="https://cdn.jsdelivr.net/npm/smooth-zoom/dist/zoom.browser.js"></script>

Javascript

Zoom(".zoomable",{
    background: "auto"
  });

/* Full Source Below - zoom.browser.js

window.Zoom=function(e,t){const n=t&&t.originalizer?t.originalizer:e=>e,o={screenWidth:0,screenHeight:0,scrollBar:0},r=t&&t.background?t.background:null,i=()=>{const{documentElement:e}=document;o.screenWidth=window.innerWidth||e.clientWidth,o.screenHeight=window.innerHeight||e.clientHeight,o.scrollBar=o.screenWidth-e.offsetWidth},c=e=>{const t=e.currentSrc||e.src,{srcset:i}=e,{screenWidth:c,screenHeight:s,scrollBar:d}=o,{width:l,height:m,left:h,top:g}=e.getBoundingClientRect(),f=(c-d)/2-h-l/2,u=(s-m)/2-g,v=document.createElement("div"),w=document.createElement("img"),E=()=>{v.classList.remove("zoom-bg--reveal"),w.style.transform="",w.addEventListener("transitionend",()=>{v.remove(),e.classList.remove("zoom-original--hidden"),w.remove()},{once:!0}),v.removeEventListener("click",E),w.removeEventListener("click",E),window.removeEventListener("scroll",E),window.removeEventListener("resize",E)};let L=e.naturalWidth;if(w.style.top=`${g+window.scrollY}px`,w.style.left=`${h}px`,w.style.width=`${l}px`,w.style.height=`${m}px`,v.classList.add("zoom-bg"),r)if("auto"===r){const t=a(e);v.style.background=t?`rgb(${t.r}, ${t.g}, ${t.b})`:"rgb(0, 0, 0)"}else v.style.background=r;if(i){const e=i.match(/ ([0-9]+)w/gm);e&&e.forEach(e=>{const t=+e.trim().replace("w","");t>L&&(L=t)})}L>=c&&(L=c);const p=L*(m/l);p>=s&&(L=L*s/p),w.classList.add("zoom-img"),w.src=t,w.width=l,w.height=m,v.addEventListener("click",E,{once:!0}),w.addEventListener("click",E,{once:!0}),window.addEventListener("scroll",E,{once:!0}),window.addEventListener("resize",E,{once:!0}),document.body.append(v),document.body.append(w),w.offsetWidth,e.classList.add("zoom-original--hidden");const y=L!==l?L/l:1;w.style.transform=`matrix(${y}, 0, 0, ${y}, ${f}, ${u})`,v.classList.add("zoom-bg--reveal"),w.addEventListener("transitionend",()=>{w.src=n(t)})},s=e=>{c(e.target)},a=e=>{const t={r:0,g:0,b:0},n=document.createElement("canvas"),o=n.getContext("2d");if(!o)return null;const r=n.width=e.naturalWidth||e.offsetWidth||e.width,i=n.height=e.naturalHeight||e.offsetHeight||e.height;let c,s,a=-4,d=0;o.drawImage(e,0,0);try{c=o.getImageData(0,0,r,i)}catch(e){return null}for(s=c.data.length;(a+=20)<s;)++d,t.r+=c.data[a],t.g+=c.data[a+1],t.b+=c.data[a+2];return t.r=Math.floor(t.r/d),t.g=Math.floor(t.g/d),t.b=Math.floor(t.b/d),t},d=e=>{if(e&&("string"==typeof e?document.querySelectorAll(e).forEach(l):e instanceof HTMLElement?l(e):(e instanceof NodeList||e instanceof Array)&&e.forEach(l),"string"==typeof e)){const t=document.createElement("style"),n=document.head||document.getElementsByTagName("head")[0];t.appendChild(document.createTextNode(`${e}{cursor:zoom-in}`)),n.appendChild(t)}},l=e=>{if(e instanceof HTMLElement)if("IMG"===e.tagName)e.addEventListener("click",s);else{const t=e.querySelector("img");t&&t.addEventListener("click",s)}};return i(),window.addEventListener("resize",i,{passive:!0}),d(e),{zoom:c,attach:d}};!function(){const e=document.createElement("style"),t=document.head||document.getElementsByTagName("head")[0];e.appendChild(document.createTextNode(".zoom-bg,.zoom-img{z-index:90000;cursor:zoom-out}.zoom-img{position:absolute;display:block;will-change:transform;transition:transform .3s ease-in-out}.zoom-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#121212;opacity:0;will-change:opacity;transition:opacity .3s ease-in-out}.zoom-bg.zoom-bg--reveal{opacity:.95}.zoom-original--hidden{visibility:hidden}")),t.appendChild(e)}();

*/