Lightweight responsive image zoom component for Vue.js 2, that also works on touch devices. Perfect for zooming on product images on an ecommerce website.
<image-zoom regular="img/sky.jpg" zoom="img/sky-zoom.jpg" :zoom-amount="3" img-class="img-fluid" alt="Sky"> </image-zoom>
Here you can see it is not as sharp as using a zoom image
<image-zoom regular="img/sky.jpg" img-class="img-fluid" alt="Sky"> </image-zoom>
<image-zoom regular="img/grass.jpg" zoom="img/grass-zoom.jpg" :zoom-amount="3" :click-zoom="true" img-class="img-fluid" alt="Grass"> </image-zoom>
<image-zoom regular="img/balls.jpg" zoom="img/balls-zoom.jpg" hover-message="Custom hover message" touch-message="Custom touch message" img-class="img-fluid" alt="Ball pool"> </image-zoom>
Browser width 1200px or above will show black & white sky image, 992 and above will show sky inverted. Below 992px will be original sky image set.
Width order must start from highest min width.
<image-zoom regular="img/sky.jpg" zoom="img/sky-zoom.jpg" :zoom-amount="3" img-class="img-fluid" alt="Sky" :breakpoints="[ { width: 1200, regular: 'img/sky-bw.jpg', zoom: 'img/sky-zoom-bw.jpg' }, { width: 992, regular: 'img/sky-inverted.jpg', zoom: 'img/sky-zoom-inverted.jpg' } ] > </image-zoom>