medium-zoom-element

0.0.1 • Public • Published

Medium Zoom Element

HTML Element for medium-zoom

version size gzip size 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

Readme

Keywords

none

Package Sidebar

Install

npm i medium-zoom-element

Weekly Downloads

420

Version

0.0.1

License

MIT

Last publish

Collaborators

  • francoischalifour