Image Zoom

A lightbox plugin to zoom on an image on click.

Dependencies

• Swipe Content

How to

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.

Add a 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 .image-zoom element.

To change the custom cursor image in CSS, create an SVG image and convert it using an 'SVG to Data URI' converter. For the PNG fallback, use a PNG to Data URI converter.

🌅 Demo photo by JC Gellidon on Unsplash.

 

Categories

• Ecommerce > Plugin
• Plugins > Misc
• Overlays

Bug report & feedback

Component Github page ↗