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

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

0 201

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.

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="https://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

Leave A Reply

Your email address will not be published.