A lightbox plugin to zoom on an image on click.
All components are based on CodyFrame.
The Image Zoom component is used to reveal a bigger version of an image on click, with a morphing transition from the first (preview) image to a bigger version of the same image.
data-img attribute to the
.image-zoom element to pass the path of the zoomed image. If no
data-img is passed, the url of the
.image-zoom__preview is used.
For the animation to work properly, the preview and the zoomed images need to have the same aspect ratio.
To disable the morph effect, add a
data-morph="off" to the
🌅 Demo photo by JC Gellidon on Unsplash.