- Basic Usage
- Options / Defaults
- Browser Support
- Contributors ✨
npm install drift-zoom
bower install drift
- Manual: Download and use
If you're using the pre-built version of Drift, it will automatically make
window.Drift available for your use when included on your page.
If you prefer to use
require statements and a build tool like Browserify, here are a couple examples to help:
If your project uses ES6, you can do the following instead:
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, or take a peek at our demo. Here's an example of a basic implementation:
Here's an example of using Drift with a custom configuration. All of the listed options are displayed with their default value.
Disable your Drift instance. This will prevent your Drift instance from showing, but will not hide it if it's currently visible.
Enable your Drift instance.
Change the URL of the zoom image to the passed string. This only has a visible effect while your Drift is currently open. When opening, Drift always pulls the zoom image URL from the specified
sourceAttribute. If you want to make a "permanent" change that will persist after the user leaves and re-enters your Drift trigger, you update its
sourceAttribute as well (default
data-zoom). For more information about this method, please see issue #42.
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-closing (this can be a "noop" style animation, as seen in the base styles source).
In this section we answer common questions about Drift.
If you would like the touch events not to fire on mobile for one reason or another, these two solutions should work for you.
This solution places a transparent element over the image on mobiles to block touch events. Replace
1024px in the media query with your mobile breakpoint.
This solution creates and destroys the Drift instance when the browser size changes. It depends on the library responsive.js but can easily be altered to use vanilla JS.
This code will iterate over all elements on your page with the class
drift-img, and will instantiate Drift for each element. You can update the query selector and pane as you see fit.
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.
This project follows the all-contributors specification. Contributions of any kind welcome!
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.