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

on

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:-
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')
});


download source code.






Comments

Post a Comment