Vue Image Zoomer

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.

Default Hover Zoom

<image-zoom 
    regular="img/sky.jpg" 
    zoom="img/sky-zoom.jpg" 
    :zoom-amount="3" 
    img-class="img-fluid"
    alt="Sky">				
</image-zoom>

Default Hover Zoom with just a regular image

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>

Click To 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>

Custom Messages and default zoom amount

<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>

Breakpoints

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>