Silky Smooth Image Zoom and Lightbox
What is Silky Smooth Image Zoom and Lightbox?
This is a nice and small javascript library that adds a image zoom or lightbox effect to your images, with no need for JQuery or any other scripts.
The author originally intended this script to behave like the images on medium with a smooth animation when clicked and then if clicked again it zooms back to its original location.
Preview
a preview of Silky Smooth Image Zoom and Lightbox
What can i use this for?
You can add this to your page, if you want a nice simple lightbox or image zoom plugin, that requires little configuration.
How to use Smooth Image Zoom?
Add the script
HTML
<script src="https://cdn.jsdelivr.net/npm/smooth-zoom/dist/zoom.browser.js"></script>
Add your images with a class name
HTML
<img src="https://source.unsplash.com/Y9ksK2aKzkU/1200x800" class="zoomable" style="width:50%;" />
Add this javascript attaching the script to your image class names.
Javascript
Zoom(".zoomable",{
background: "auto"
});
You should now have a working image zoom.
Conclusion
Very slick and light script made just to zoom in and out your images, check it out below.
Original Source
Thanks to the author marshallku this code comes from smooth-zoom on github.
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)}();
*/
External Link for Silky Smooth Image Zoom and Lightbox