Medium Zoom Versions Save

Features

• Introduce pure bundle (JS and CSS separated) (#204 and #206) (0a05b46)

Fixed

• Support images in <picture> elements with currentSrc (#194) (32ee39f)

Fixed

• Ensure zooming out doesn't happen (#176) (b920940)
• Remove loading attribute on HD target (#186) (dd01423)

Fixed

• Support lazy loading images on Firefox (#158) (aebb316), closes #157
• Remove loading attribute when zooming (df1d4d9)

Fixed

• Give zoom transition higher priority (#148) (25b3524), closes #110

Fixed

• Bring SSR compatibility by not using window outside of main function (#95)

Patches

• Use document viewport size (#78)
• Export mediumZoom type definition as ES module (#82)
• Improve type definition (#85)

Patches

• Improve TypeScript definition (#73)

Patches

• Don't prevent behavior of all clicks (71b46fa3edbbac435f610f15a46a5a00c3a66cdd)

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 (264c81f9d54b7272fa260616f117c3149be89123)
• 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.