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.

View on NPM

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>