medium-zoom-element

Medium Zoom Element

HTML Element for medium-zoom

<img src="https://img.shields.io/npm/v/medium-zoom-element.svg?style=flat-square" alt="version">

<img src="http://img.badgesize.io/https://unpkg.com/medium-zoom-element/dist/medium-zoom-element.min.js?label=size&style=flat-square" alt="size">

<img src="http://img.badgesize.io/https://unpkg.com/medium-zoom-element/dist/medium-zoom-element.min.js?compression=gzip&label=gzip%20size&style=flat-square" alt="gzip size">

<img src="https://img.shields.io/npm/l/medium-zoom-element.svg?style=flat-square" alt="MIT license">

Web component bundling the medium-zoom API.

Usage

From npm or Yarn:

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 includes dist/medium-zoom-element.min.js which is watched with yarn dev)

License

MIT © François Chalifour