https://github.com/francoischalifour/medium-zoom-element
ππ
HTML Element for medium-zoom
https://github.com/francoischalifour/medium-zoom-element
htmlelement medium-zoom webcomponent
Last synced: 11 months ago
JSON representation
ππ HTML Element for medium-zoom
- Host: GitHub
- URL: https://github.com/francoischalifour/medium-zoom-element
- Owner: francoischalifour
- License: mit
- Created: 2017-10-11T20:04:21.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-15T00:57:46.000Z (over 8 years ago)
- Last Synced: 2025-06-16T14:03:54.073Z (about 1 year ago)
- Topics: htmlelement, medium-zoom, webcomponent
- Language: JavaScript
- Homepage: https://medium-zoom.francoischalifour.com
- Size: 2.49 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Medium Zoom Element
HTML Element for medium-zoom
> Web component bundling the [`medium-zoom`](https://github.com/francoischalifour/medium-zoom) API.
## Usage
From [npm](https://www.npmjs.com) or [Yarn](https://yarnpkg.com):
```sh
npm install --save medium-zoom-element
# or
yarn add medium-zoom-element
```
From a [CDN](https://en.wikipedia.org/wiki/Content_delivery_network):
```html
```
Use the `medium-zoom` web component in your HTML page:
```html
```
## 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](https://github.com/francoischalifour/medium-zoom#options) for default values.
```html
```
### Methods
Refer to [`medium-zoom`'s methods](https://github.com/francoischalifour/medium-zoom#methods).
### JavaScript getters/setters
* `margin`
* `background`
* `scrollOffset`
* `metaClick`
* `zoomTarget`
```js
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`](examples/index.html) to check your changes (it includes [`dist/medium-zoom-element.min.js`](dist/medium-zoom-element.min.js) which is watched with `yarn dev`)
## License
MIT © [François Chalifour](https://francoischalifour.com)