Simple Javascript Image Magnifier on Mouse Over

The drift.js is a simple and easy to use Simple Javascript Image Magnifier plugin for creating a Zooming effect on hover. When the user mouse over the specified part of the image, they can see the bigger version of that part on the left side.

It is built with only Javascript and CSS. The plugin works well on mobile devices and supports a wide range of browsers. When a user hovers an image, it shows a bigger/enlarge an area of that image.

Furthermore, the drift works with mouse movement and as the user moves the mouse course over the image, it shows the bigger version of an image next to the main photo.

Additionally, it comes with two nice functions. The first one displays the large image beside the original one and the second one is displaying a magnifying glass effect on an image on the small screen.

The Zoom Image on hover is a great way to provide a nice user experience. instead of adding large images that take much of webpage space, let’s add the image magnifier instead.

Basic Usage Simple Javascript Image Magnifier

The basic usage is simple and you need to add two files into the header.

<link rel="stylesheet" href="dist/drift-basic.css">
<script src="dist/Drift.js"></script>

The HTML is simple and you need to add the IMG tag and define the thumb in the src. You need to add the large image by defining the data attribute data-zoom. Also, don’t forget to trigger by defining the class. In our case we define drift-demo-trigger.

<img class="drift-demo-trigger" 
     data-zoom="large.jpg" 
     src="thumb.jpg"
>

To show the larger version of an image, create a DOM element to append the non-inline ZoomPane to.

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

Next, Active the image hover zoom effect by adding the following Javascript code.

<script>
new Drift(document.querySelector('.drift-demo-trigger'), {
	paneContainer: document.querySelector('.detail'),
	inlinePane: 900,
	inlineOffsetY: -85,
	containInline: true,
	hoverBoundingBox: true
});
</script>

Let’s have a look at the many other options which can be used to customize the plugin. All of the below 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,
	// A DOM element to append the bounding box to.
	boundingBoxContainer = document.body,
};

new Drift(document.querySelector('img'), options);