Zoom In And Show Larger Resolution Image When Hovering Thumbnail With JavaScript
July 22, 2019 by Andreas Wik
A lot of ecommerce websites have got this little feature where you can zoom in on the product image when hovering it. Basically you hover over a small/medium resolution image and a high resolution image appears so you can see details.
This is quite easy to achieve using Drift – a nice little JavaScript plugin.
First of all, include the Drift CSS and JavaScript files on your page
<link rel="stylesheet" href="drift-basic.min.css">
<script src="Drift.min.js"></script>
Next, we need two containers. One containing the “thumbnail” image and another which will be the space where the parts of the high resolution image will be shown.
We also need to put an img element in the thumbnail container which will have the src attribute set to the thumbnail URL, nothing strange there. It also needs data-zoom set to the high resolution image URL.
<div id="thumbnail-container">
<img class="drift-demo-trigger" data-zoom="product-large.jpg" src="product-small.jpg">
</div>
<div id="details-container"></div>
Important detail! The zoom pane container element needs to have its position set to relative.
#details-container {
position: relative;
}
The final step is the JavaScript. The bare minimum we need to pass to Drift is the thumbnail image that the user till hover on, and the zoom pane container.
new Drift(document.querySelector('.drift-demo-trigger'), {
// Settings
paneContainer: document.querySelector('#details-container')
});
There are a lot of settings you can play around with. For example, you’ll probably want to set hoverBoundingBox to true which will add a little magnifying area to where your cursor is at. To handle responsiveness you might want to use inlinePane to set the breakpoint at which the pane will stay inside of the thumbnail container – great for smaller screens. Check out the documentation for all options.
See the Pen Drift Zoom 1 by Andreas Wik (@andreaswik) on CodePen.
An example product page I put together that you can play around with:
See the Pen Product Page With Zoom by Andreas Wik (@andreaswik) on CodePen.
Share this article
