Skip to content

francoischalifour/medium-zoom-element

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Medium Zoom Element

HTML Element for medium-zoom

version size gzip size MIT license

πŸ”¬ 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

License

MIT © François Chalifour