francoischalifour / medium-zoom-element

🔎🌅 HTML Element for medium-zoom

Medium Zoom Element

HTML Element for medium-zoom

🔬 Playground ・ 🔎 Demo

Web component bundling the medium-zoom API.

Usage

From npm or Yarn:

npm install --save medium-zoom-element
# or
yarn add medium-zoom-element

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