0.0.1 • Published 7 years ago
medium-zoom-element v0.0.1
Web component bundling the
medium-zoom
API.
Usage
npm install --save medium-zoom
# or
yarn add medium-zoom
From a CDN:
<script src="https://unpkg.com/medium-zoom-element@0/dist/medium-zoom-element.min.js"></script>
Use the medium-zoom
web component in your HTML page:
<medium-zoom
src="image.jpg"
alt="Zoomable image"
></medium-zoom>
API
Options
Attribute | Description |
---|---|
src | Source of the image |
alt | Alternative text for the image |
width | Width of the image |
height | Height of the image |
margin | Space outside the zoomed image |
background | Color of the overlay |
scroll-offset | Number of pixels to scroll to dismiss the zoom |
disable-metaclick | Disables the action on meta click (opens the link / image source) |
zoom-target | Source of the zoomed image |
Refer to medium-zoom
's options for default values.
<medium-zoom
src="image.jpg"
zoom-target="image-hd.jpg"
margin="48"
background="rgba(0,0,0,.16)"
scroll-offset="0"
disable-metaclick
alt="Zoomable image"
></medium-zoom>
Methods
Refer to medium-zoom
's methods.
JavaScript getters/setters
margin
background
scrollOffset
metaClick
zoomTarget
const image = document.querySelector('medium-zoom')
image.margin = 48
console.log(image.margin) // 48
Dev
- Run
yarn
to install Node dependencies - Run
yarn dev
to watch changes and rebuild the library - Open
examples/index.html
to check your changes (it includesdist/medium-zoom-element.min.js
which is watched withyarn dev
)
License
MIT © François Chalifour
0.0.1
7 years ago