Responsive Image Zoom Effect on Hover (or touch) in Javascript – Drift.js Plugin

by

Responsive Image Zoom Effect on Hover (or touch) in Javascript – Drift.js Plugin:-
IF You you want to add responsive image zoom effect on mouse hover, Then in this post I am going to share simple javascript plugin with no dependency on other plugin like jQuery etc. The plugin name Drift. Drift is a simple, lightweight, no-dependencies JavaScript “zoom on hover” tool from imgix. Move your mouse over the image (or touch it) to see it in action. It is a standalone and highly configurable JavaScript library that provides responsive and smooth hover (or touch) zoom effect on images.

Responsive Image Zoom Effect on Hover



Integrate Responsive Image Zoom Effect on Hover

Libraries

Only required minified Drift.min.js & drift-basic.css on page and all set to configure image zoom effect on hover.

<!--CSS-->
<link rel="stylesheet" media="screen, projection" href="drift-basic.min.css">
 
<!--JS-->
<script src="Drift.min.js"></script>

HTML

Add a thumbnail image to your webpage and use data-zoom attribute to set the path the large version of this image. which will display zoom version on mouse over.

<img src="http://assets.imgix.net/dog.png?w=400" data-zoom="http://assets.imgix.net/dog.png?w=1200">

Now Create a DOM element to append the non-inline Zoom-pane.

<div class="detail">
</div>

JS

Finally call the plugin function and enable image zoom effect on hover (or touch).

new Drift(document.querySelector('img'), {
  paneContainer: document.querySelector('.detail')
});



See live demo and download source code.

DEMO | DOWNLOAD

Following are the list of configuration to customize imagezoom effects. All of the listed options are displayed with their default value.

var options = {
	
	
	
	namespace: null,
	
	showWhitespaceAtEdges: false,
	
	
	containInline: false,
	
	
	inlineOffsetX: 0,
	inlineOffsetY: 0,
	
	inlineContainer: document.body,
	
	sourceAttribute: 'data-zoom',
	
	
	
	zoomFactor: 3,
	
	
	paneContainer: document.body,
	
	
	// if `false`, it will switch to inline when `windowWidth <= inlinePane`
	inlinePane: 375,
	
	handleTouch: true,
	
	
	onShow: null,
	
	
	onHide: null,
	// Add base styles to the page. See the "Theming"
	
	injectBaseStyles: true,
	
	
	hoverDelay: 0,
	
	
	
	// "tap and hold" is much more intentional than a hover event.
	touchDelay: 0,
	
	
	hoverBoundingBox: false,
	
	
	touchBoundingBox: false,
};
 
new Drift(document.querySelector('img'), options);

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by Rohit