Skip to content

Releases: francoischalifour/medium-zoom

1.1.0

16 Nov 11:30
Compare
Choose a tag to compare

Features

1.0.8

15 Nov 13:26
Compare
Choose a tag to compare

Fixed

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

1.0.7

14 Nov 17:42
Compare
Choose a tag to compare

Fixed

1.0.6

14 Nov 13:49
Compare
Choose a tag to compare

Fixed

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

1.0.5

07 Dec 21:15
Compare
Choose a tag to compare

Fixed

1.0.4

06 Apr 08:49
Compare
Choose a tag to compare

Fixed

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

1.0.3

20 Jan 12:49
Compare
Choose a tag to compare

Patches

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

1.0.2

05 Sep 17:45
Compare
Choose a tag to compare

Patches

  • Improve TypeScript definition (#73)

1.0.1

29 Aug 14:55
Compare
Choose a tag to compare

Patches

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

1.0.0

28 Aug 13:53
Compare
Choose a tag to compare

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

  • 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() => voidopen({ target?: Element }) => Promise<Zoom>
    • hide() => voidclose() => Promise<Zoom>
    • toggle() => voidtoggle({ target?: Element }) => Promise<Zoom>
    • detach() => voiddetach(...selectors: string[]|Element[]|NodeList[]|Array[]) => Zoom
    • update(options: object) => voidupdate(options: object) => Zoom
    • addEventListeners(type: string, listener: Function) => voidon(type: string, listener: Function, options?: object) => Zoom
    • removeEventListeners(type: string, listener: Function) => voidoff(type: string, listener: Function, options?: object) => Zoom
  • Attributes

    • data-zoom-targetdata-zoom-src
  • Events

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

Special thanks

@tuelsch, @garviand and @mimamuh.