Easily add "zoom on hover" functionality to your site's images. Lightweight, no-dependency JavaScript.
- NPM:
npm install drift-zoom - Bower:
bower install drift - Manual: Download and use
dist/Drift.min.jsordist/Drift.js
Once you've installed Drift via one of the above methods, you're ready to get started. There are no dependencies, so you can just start making cool stuff. Check out the announcement blog post for a demo, or take a peek here: https://imgix.github.io/drift. Here's an example of the most basic possible implementation:
<img src="http://assets.imgix.net/dog.png?w=400" data-zoom="http://assets.imgix.net/dog.png?w=1200">
<p>This is a simple description of the dog picture.</p>new Drift(document.querySelector('img'), {
paneContainer: document.querySelector('p')
});Here's an example of using Drift with a custom configuration. All of the listed 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,
// 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,
};
new Drift(document.querySelector('img'), options);By default, Drift injects an extremely basic set of styles into the page. You will almost certainly want to extend these basic styles for a prettier, more usable experience that matches your site. There is an included basic theme that may meet your needs, or at least give a good example of how to build out your own custom styles. The namespace option can be used as a way to easily apply different themes to specific instances of Drift.
If you need to do something very out of the ordinary, or just prefer to include the default styles in CSS yourself, you can pass injectBaseStyles: false when instantiating a new instance of Drift. Please note that if you disable the included base styles, you will still need to provide an animation for .drift-window.drift-opening and .drift-window.drift-closing (this can be a "noop" style animation, as seen in the base styles source).
We support the latest version of Google Chrome (which automatically updates whenever it detects that a new version of the browser is available). We also support the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4). Each time a new version is released, we begin supporting that version and stop supporting the third most recent version.
Drift was made by imgix. It's licensed under the BSD 2-Clause license (see the license file for more info). Any contribution is absolutely welcome, but please review the contribution guidelines before getting started.