Vanilla JS, zero-dependency takeover zoom effect like the images here.
import Zoomhaus from 'zoomhaus'
new Zoomhaus('element-selector')
- Include
dist/bundle.js
. new Zoomhaus('element-selector')
on any elements you want to zoom on click.
That's it!
new Zoomhaus('element-selector', {
// Will the image be able to grow and shrink when moving to and from its container?
grow: true,
// Can we page through images with left/right arrow keys?
arrows: true,
// Can we use the 'esc' key to close an open gallery?
esc: true,
// Margins for expanded image
marginX: 50,
marginY: 50,
// Selector for template element - see below
template: false,
// Does a click anywhere close the open overlay?
clickToExit: true,
// Does a scroll close the open overlay?
closeOnScroll: true,
// Replacement for zoomhaus.goto method. Accepts 3 params: Zoomhaus instance, outgoing element, and incoming element.
onGoTo: false,
// Selectors that close the overlay when clicked
close: false,
// CSS to be added to Zoomhaus defaults. Set to `false` to prevent any style injection.
style: ''
})
A note on template
- If template
is set to a valid selector, Zoomhaus will grab the first element that matches that selector and place it in the image overlay. Useful for pager elements on the overlay itself, for example.
Usage:
var z = new Zoomhaus('.element-selector')
z.methodName()
close()
- Close an open overlay.goto(index)
- Go to a particular Zoomhaus target. Loops automatically.next()
- Go to the next Zoomhaus target. Loops automatically.previous()
- Go to the previous Zoomhaus target. Loops automatically.
elements
- Elements that this Zoomhaus instance watches.index
- Index of current or last active zoomed-in element.opts
- Options for Zoomhaus instance.
- Clone or fork this repo.
npm install
npm run dev
to watch the contents ofsrc
. Runs a webpack-dev-server that serves a rendered version of./index.ejs
, a demo of the plugin in action.npm run build
to bundle, and minify todist/bundle.js
.
Version 3.1.1
- 3.1.1 - Fixed export bug
- 3.1.0 - Removed need for extra CSS file
- 3.0.0 - Migrated to vanilla JS
- 2.1.1 - Fixed a click-to-close bug
- 2.1.0 - Trimmed down lots of extra code, made class declarations central
- 2.0.4 - Added
goto
- 2.0.3 - Added
clickToExit
,closeOnScroll
, more robust events and documentation - 2.0.2 - Added
template
- 2.0.1 - Added
marginX
andmarginY
, fixed a vertical sizing bug