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.

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.

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

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 = {
	// Prefix for generated element class names (e.g. `my-ns` will
	// result in classes such as `my-ns-pane`. Default `drift-`
	// prefixed classes will always be added as well.
	namespace: null,
	// Whether the ZoomPane should show whitespace when near the edges.
	showWhitespaceAtEdges: false,
	// Whether the inline ZoomPane should stay inside
	// the bounds of its image.
	containInline: false,
	// How much to offset the ZoomPane from the
	// interaction point when inline.
	inlineOffsetX: 0,
	inlineOffsetY: 0,
	// A DOM element to append the inline ZoomPane to.
	inlineContainer: document.body,
	// Which trigger attribute to pull the ZoomPane image source from.
	sourceAttribute: 'data-zoom',
	// How much to magnify the trigger by in the ZoomPane.
	// (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane image
	// if the trigger is displayed at 300 px wide)
	zoomFactor: 3,
	// A DOM element to append the non-inline ZoomPane to.
	// Required if `inlinePane !== true`.
	paneContainer: document.body,
	// When to switch to an inline ZoomPane. This can be a boolean or
	// an integer. If `true`, the ZoomPane will always be inline,
	// if `false`, it will switch to inline when `windowWidth <= inlinePane`
	inlinePane: 375,
	// If `true`, touch events will trigger the zoom, like mouse events.
	handleTouch: true,
	// If present (and a function), this will be called
	// whenever the ZoomPane is shown.
	onShow: null,
	// If present (and a function), this will be called
	// whenever the ZoomPane is hidden.
	onHide: null,
	// Add base styles to the page. See the "Theming"
	// section of README.md for more information.
	injectBaseStyles: true,
	// An optional number that determines how long to wait before
	// showing the ZoomPane because of a `mouseenter` event.
	hoverDelay: 0,
	// An optional number that determines how long to wait before
	// showing the ZoomPane because of a `touchstart` event.
	// It's unlikely that you would want to use this option, since
	// "tap and hold" is much more intentional than a hover event.
	touchDelay: 0,
	// If true, a bounding box will show the area currently being previewed
	// during mouse hover
	hoverBoundingBox: false,
	// If true, a bounding box will show the area currently being previewed
	// during touch events
	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