medium-zoom-element

Medium Zoom HTML Element

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
medium-zoom-element
310.0.15 years ago5 years agoMinified + gzip package size for medium-zoom-element in KB

Readme

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

License

MIT © François Chalifour