Drift.js

Drift.js is a small open-source JavaScript library for image zoom. It pairs a trigger image with a zoom pane and shows a magnified region as the pointer moves across it. It is built for pointer input, and it expects a second element with room to render the magnified view.

Documented at https://github.com/strawdynamics/drift.

How We've Used It

Product galleries use it on pointer devices only. The zoom pane needs both space and a cursor, so initialization sits behind a width check and touch screens get a gesture library instead. Because our galleries swap their media set when a shopper picks a different shade, the zoom binding is attached to the active slide rather than to a fixed element, so it follows the gallery instead of pointing at an image that is no longer on screen. Products whose media set is a single image never load it at all.

Builds Using It

No page in this batch covers a build on it yet. 3 gated builds use it; their pages follow.

Related Entities

• PinchZoom
• Swiper
• Flickity
• Product detail page

Our Role

Integration. We initialize the library against our own gallery markup; the library is open source and stays as published.