medium-zoom 1.0.0

on Node.js NPM

New features

• Methods become chainable. All methods except getters and animation methods (open(), close() and toggle()) return the zoom object to allow method calls to be chained.

const zoom = mediumZoom()

zoom
  .attach('#image-1', '#image-2')
  .on('open', () => zoom.update({ background: 'yellow' }))
  .open()

• Animation methods return promises. open(), close() and toggle() return promises resolving with the zoom for acting accordingly when the animation is completed. To remain compatible with IE10, promises are converted to no-operation functions if unavailable.

const zoom = mediumZoom('[data-zoom]')

zoom.open().then(() => zoom.update({ background: 'yellow' }))

• Options

  • background supports the background CSS property (not only background-color)

• Methods

  • attach(...selectors: string[]|Element[]|NodeList[]|Array[]) => Zoom
  • clone(options?: object) => Zoom
  • getOptions() => object
  • getImages() => Element[]
  • getZoomedImage() => Element

• Events

  • "update" is fired when the update method is called

• Add TypeScript definitions

• Improve documentation

Bug fixes

• HD image scales the first time on Firefox (264c81f)
• Support srcset attribute (#51)
• Support SVG sources (#56)

Breaking changes

• Imports. If you're using CommonJS, you'll need to change the require statement:

- const mediumZoom = require('medium-zoom')
+ const mediumZoom = require('medium-zoom').default

• No images selected by default. Prior to version 1, all scaled images (via HTML or CSS properties) were added to the zoom when calling mediumZoom(). Now, calling mediumZoom() without selector does not attach any images to the zoom. This change is necessary for having a more predictable behavior and a more composable API.

• Options

  • metaClick was removed

• Methods

  • show() => void → open({ target?: Element }) => Promise<Zoom>
  • hide() => void → close() => Promise<Zoom>
  • toggle() => void → toggle({ target?: Element }) => Promise<Zoom>
  • detach() => void → detach(...selectors: string[]|Element[]|NodeList[]|Array[]) => Zoom
  • update(options: object) => void → update(options: object) => Zoom
  • addEventListeners(type: string, listener: Function) => void → on(type: string, listener: Function, options?: object) => Zoom
  • removeEventListeners(type: string, listener: Function) => void → off(type: string, listener: Function, options?: object) => Zoom

• Attributes

  • data-zoom-target → data-zoom-src

• Events

  • "show" → "open"
  • "shown" → "opened"
  • "hide" → "close"
  • "hidden" → "closed"

Special thanks

@tuelsch, @garviand and @mimamuh.