{"_id":"@fisch0920/medium-zoom","_rev":"1-bf3ee2fb858a6dc06d9f407121339ec7","name":"@fisch0920/medium-zoom","dist-tags":{"latest":"1.0.7"},"versions":{"1.0.6":{"name":"@fisch0920/medium-zoom","publishConfig":{"tag":"latest","access":"public"},"version":"1.0.6","description":"A JavaScript library for zooming images like Medium","license":"MIT","repository":{"type":"git","url":"https://github.com/francoischalifour/medium-zoom.git"},"author":{"name":"Francois Chalifour","email":"francois.chalifour@gmail.com","url":"https://francoischalifour.com"},"main":"dist/medium-zoom.min.js","module":"dist/medium-zoom.esm.js","types":"dist/medium-zoom.d.ts","sideEffects":false,"scripts":{"start":"yarn run dev","dev":"rollup --config --watch","prebuild":"yarn run clean","build":"rollup --config","postbuild":"cp ./src/medium-zoom.d.ts ./dist","prepublishOnly":"npm run build","lint":"eslint .","format":"prettier --write *.{js,json,css,md} && yarn run lint --fix","test":"jest","test:cypress:run":"cypress run","test:cypress:open":"cypress open","test:cypress:update":"cypress run --env updateSnapshots=true","test:cypress":"npm-run-all --parallel --race storybook test:cypress:run","test:cypress:record":"npm-run-all --parallel --race storybook 'test:cypress:run -- --record --key {1}' --","test:size":"bundlesize","clean":"rimraf ./dist","build:storybook":"build-storybook -o ./website/dist/storybook -c ./stories/config -s ./dist,./stories/images","storybook":"start-storybook -p 9001 -c ./stories/config -s ./dist,./stories/images","build:website":"(cd website && yarn && yarn run build) && yarn run build && yarn run build:storybook","changelog:update":"conventional-changelog -p angular -i CHANGELOG.md -s","release":"release-it","release:next":"release-it --preRelease=next","release:examples":"./scripts/release-examples.sh"},"keywords":["medium","image","zoom","picture","lightbox","click","scroll","pure","plain","vanilla","javascript","ux","performance","event","medium-zoom","zoomable"],"devDependencies":{"@storybook/addon-notes":"4.0.0-alpha.14","@storybook/addon-options":"4.0.0-alpha.14","@storybook/addon-storysource":"4.0.0-alpha.14","@storybook/html":"4.0.0-alpha.14","babel-core":"6.26.3","babel-eslint":"10.0.3","babel-plugin-external-helpers":"6.22.0","babel-plugin-require-context-hook":"1.0.0","babel-plugin-transform-object-rest-spread":"6.26.0","babel-preset-env":"1.7.0","bundlesize":"0.18.0","conventional-changelog-cli":"2.0.28","cssnano":"4.1.10","cypress":"3.7.0","cypress-image-snapshot":"3.1.1","eslint":"5.12.1","eslint-config-airbnb-base":"13.1.0","eslint-config-prettier":"3.6.0","eslint-plugin-cypress":"2.7.0","eslint-plugin-import":"2.18.2","husky":"3.1.0","jest":"23.6.0","npm-run-all":"4.1.5","prettier":"1.19.1","pretty-quick":"1.10.0","release-it":"10.4.5","rimraf":"3.0.0","rollup":"1.27.8","rollup-plugin-babel":"3.0.7","rollup-plugin-filesize":"6.2.1","rollup-plugin-license":"0.13.0","rollup-plugin-postcss":"2.0.3","rollup-plugin-replace":"2.2.0","rollup-plugin-terser":"5.1.2","rollup-plugin-uglify":"4.0.0","rollup-watch":"4.3.1"},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016-present François Chalifour\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@fisch0920/medium-zoom@1.0.6","dist":{"shasum":"e55abdf58670414226debfca87965ce1428e5faa","integrity":"sha512-4Pa9LjccQyHGL+gAH7mad5tMdcbWpNKCjr4GbWjyDlCdjZsX2I1fj8J83zwABiygXGu9VgJ4NqD4oE6ljyBLyQ==","tarball":"https://registry.npmjs.org/@fisch0920/medium-zoom/-/medium-zoom-1.0.6.tgz","fileCount":10,"unpackedSize":81856,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIER4Txbb6zbsi6kM72zkgjziBxYG/EL/E0PtQJG9LnWsAiEAnDeHP+0ZH6uRC+WwkkjHjzXBByMJK2mrsdmiM9d1KM0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVLfwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRHw//R1Lid3ZIQYJOH+ybeCAqU81RJGs129DHcc2p4hodLDnExl9W\r\nV420CFqygNJVGCyojjv9IbcxE4AdEgLQ91B4NoVjjtruEpgjVR4O20jKve07\r\nBdJOJshFbrl36RRp6QiF2saYlhUDSZykmw4Iho4tgkOnlZ3k7G7ceRJK1B3M\r\nc4O/MAws5WWeCXSdVuqt4cz5OY0rwTOXscOHjrz7gpiupWiKx221MC/LAgZw\r\nkfKV/+yGGZ1txVkJh8kGRNfdebtJX6uwVjcJO+k5mLNGotsDlZBE40XUbSZx\r\nA9+5VJ22ojSgwHikwr0oTGpcbabW7zbUEnFDgqt5EI82ZTLOGWrMrCmigjha\r\nJbqeCwGIcC7sRkDLMTpCVlu5cy6Xa+G7ESwVfPWwUqIBGYbN0ZLDRe6Pl3/P\r\nmipnpmP456AuFk6ttVioc7fbUYbH6qBB5Lfxs4ftl/1xV6WDmuq7WmuBqFEA\r\nTGDQqmo6CL35YSiZEXzI9fYOqGJvyowoGTo6HyGCzDUZGp+BA39NQrjGRKLr\r\nnuCYBUxTbNl4/YmoKi2SLptKikvNESweiU/L6Cs05fATzuXA9b+YGS7frIdX\r\nZELXRkADOryVh9jnA8zpDbL6SVh5fPTdrCGhvHIXcIitmtckj4Ji+DlwWx9o\r\ne+Uy7VmkA3MlcTT363D4gHZ8LAoyUSo/tWM=\r\n=u6iv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fisch0920","email":"fisch0920@gmail.com"},"directories":{},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/medium-zoom_1.0.6_1649719279991_0.866005403312998"},"_hasShrinkwrap":false},"1.0.7":{"name":"@fisch0920/medium-zoom","publishConfig":{"tag":"latest","access":"public"},"version":"1.0.7","description":"A JavaScript library for zooming images like Medium","license":"MIT","repository":{"type":"git","url":"https://github.com/francoischalifour/medium-zoom.git"},"author":{"name":"Francois Chalifour","email":"francois.chalifour@gmail.com","url":"https://francoischalifour.com"},"main":"dist/medium-zoom.min.js","module":"dist/medium-zoom.esm.js","types":"dist/medium-zoom.d.ts","sideEffects":false,"scripts":{"start":"yarn run dev","dev":"rollup --config --watch","prebuild":"yarn run clean","build":"rollup --config","postbuild":"cp ./src/medium-zoom.d.ts ./dist","prepublishOnly":"npm run build","lint":"eslint .","format":"prettier --write *.{js,json,css,md} && yarn run lint --fix","test":"jest","test:cypress:run":"cypress run","test:cypress:open":"cypress open","test:cypress:update":"cypress run --env updateSnapshots=true","test:cypress":"npm-run-all --parallel --race storybook test:cypress:run","test:cypress:record":"npm-run-all --parallel --race storybook 'test:cypress:run -- --record --key {1}' --","test:size":"bundlesize","clean":"rimraf ./dist","build:storybook":"build-storybook -o ./website/dist/storybook -c ./stories/config -s ./dist,./stories/images","storybook":"start-storybook -p 9001 -c ./stories/config -s ./dist,./stories/images","build:website":"(cd website && yarn && yarn run build) && yarn run build && yarn run build:storybook","changelog:update":"conventional-changelog -p angular -i CHANGELOG.md -s","release":"release-it","release:next":"release-it --preRelease=next","release:examples":"./scripts/release-examples.sh"},"keywords":["medium","image","zoom","picture","lightbox","click","scroll","pure","plain","vanilla","javascript","ux","performance","event","medium-zoom","zoomable"],"devDependencies":{"@storybook/addon-notes":"4.0.0-alpha.14","@storybook/addon-options":"4.0.0-alpha.14","@storybook/addon-storysource":"4.0.0-alpha.14","@storybook/html":"4.0.0-alpha.14","babel-core":"6.26.3","babel-eslint":"10.0.3","babel-plugin-external-helpers":"6.22.0","babel-plugin-require-context-hook":"1.0.0","babel-plugin-transform-object-rest-spread":"6.26.0","babel-preset-env":"1.7.0","bundlesize":"0.18.0","conventional-changelog-cli":"2.0.28","cssnano":"4.1.10","cypress":"3.7.0","cypress-image-snapshot":"3.1.1","eslint":"5.12.1","eslint-config-airbnb-base":"13.1.0","eslint-config-prettier":"3.6.0","eslint-plugin-cypress":"2.7.0","eslint-plugin-import":"2.18.2","husky":"3.1.0","jest":"23.6.0","npm-run-all":"4.1.5","prettier":"1.19.1","pretty-quick":"1.10.0","release-it":"10.4.5","rimraf":"3.0.0","rollup":"1.27.8","rollup-plugin-babel":"3.0.7","rollup-plugin-filesize":"6.2.1","rollup-plugin-license":"0.13.0","rollup-plugin-postcss":"2.0.3","rollup-plugin-replace":"2.2.0","rollup-plugin-terser":"5.1.2","rollup-plugin-uglify":"4.0.0","rollup-watch":"4.3.1"},"licenseText":"The MIT License (MIT)\n\nCopyright (c) 2016-present François Chalifour\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@fisch0920/medium-zoom@1.0.7","dist":{"shasum":"46b09b40a1be796f7ff13ea594973e1f1d3c66f6","integrity":"sha512-hPUrgVM/QvsZdZzDTPyL1C1mOtEw03RqTLmK7ZlJ8S/64u4O4O5BvPvjB/9kyLtE6iVaS9UDRAMSwmM9uh2JIw==","tarball":"https://registry.npmjs.org/@fisch0920/medium-zoom/-/medium-zoom-1.0.7.tgz","fileCount":10,"unpackedSize":82001,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFoRcQhw8fcDe1ahYin6+Mlg5SmTmYA0tl41VgidszVCAiEA5kDtFvLGKQaH+Ldy0K8NNHA8Xigh26V6ZuZ44TkzkVE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiVLioACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq79w//RPQx+oDFQGnU6z6hF7sGGbbcoZakckC9zAWDWVzrUe1bkG/t\r\nYsLwQtEXP+ETJu0SKVDYCU8ml9gRxnwimBHzNmAWHnCmR7baj+yb+PFxxEiB\r\nywGjzSWfhxmBUvkQ3Xt5lMigrl8qniwK9AjM3jz+ngjHEip8dKRwq/2znZmZ\r\nT/S+e3lcsy3M6dZRfbPQVf01tVJz11enGyfC1A+pZ5/O03cR9/jai+SXBVQY\r\nKvi7IJguxbosChduEbwwae2oFYnYIUX225WdK/NpkkccqV0DP+hUyGe11roj\r\nb4BLHzYqLEJDDwm1C6lJW6WVYjtDdcP4lRqRAdcE1J902y7zu2CA5cdc2CIJ\r\nmZVHsJR9ImiaDN/tGkaZdKCudvznWmE/28uZTBq96HSVjHtB9x1MKOaag+xi\r\nTJ98HT8wi0VA/NPlN6qhJNoYC6fCAkqhx5s31Bmi1pIrRVmFcUTM+ybPku+N\r\nag3HxN4Z5aMFavIwvWQUS7WdoN6eciJlqjqD1xjh6119AXz5Dt17/oWuMspj\r\nEbgLVotFW6PqmFfEFruUFjph4XCoAitpqw8qATxhoOGpEKzZx1ycgYIlmkng\r\nNrSeBTWIUzt7WEw1HVshQitZBMioQ8oF8WlsNe38TM763cCkeiAVGNwvzaM/\r\nzhw70+tFwjKPV3pTGqN3wtAb+eXuTRArKKs=\r\n=gRS/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"fisch0920","email":"fisch0920@gmail.com"},"directories":{},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/medium-zoom_1.0.7_1649719464030_0.3594383999927957"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-11T23:21:19.911Z","1.0.6":"2022-04-11T23:21:20.143Z","modified":"2022-04-11T23:24:24.265Z","1.0.7":"2022-04-11T23:24:24.181Z"},"maintainers":[{"name":"fisch0920","email":"fisch0920@gmail.com"}],"description":"A JavaScript library for zooming images like Medium","keywords":["medium","image","zoom","picture","lightbox","click","scroll","pure","plain","vanilla","javascript","ux","performance","event","medium-zoom","zoomable"],"repository":{"type":"git","url":"https://github.com/francoischalifour/medium-zoom.git"},"author":{"name":"Francois Chalifour","email":"francois.chalifour@gmail.com","url":"https://francoischalifour.com"},"license":"MIT","readme":"<p align=\"center\">\n  <a href=\"https://medium-zoom.francoischalifour.com\"><img src=\"logo.svg\" alt=\"Demo\" width=\"64\"></a>\n  <h3 align=\"center\">medium-zoom</h3>\n  <p align=\"center\">A JavaScript library for zooming images like Medium</p>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/medium-zoom\">\n    <img src=\"https://img.shields.io/npm/v/medium-zoom.svg?style=flat-square\" alt=\"version\">\n  </a>\n  <a href=\"https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE\">\n    <img src=\"https://img.shields.io/npm/l/medium-zoom.svg?style=flat-square\" alt=\"MIT license\">\n  </a>\n  <a href=\"http://npmcharts.com/compare/medium-zoom\">\n    <img src=\"https://img.shields.io/npm/dm/medium-zoom.svg?style=flat-square\" alt=\"downloads\">\n  </a>\n  <br>\n  <a href=\"https://unpkg.com/medium-zoom/dist/\">\n    <img src=\"http://img.badgesize.io/https://unpkg.com/medium-zoom/dist/medium-zoom.min.js?compression=gzip&label=gzip%20size&style=flat-square\" alt=\"gzip size\">\n  </a>\n  <a href=\"https://github.com/francoischalifour/medium-zoom/blob/master/package.json\">\n    <img src=\"https://img.shields.io/badge/dependencies-none-lightgrey.svg?style=flat-square\" alt=\"no dependencies\">\n  </a>\n  <a href=\"https://travis-ci.org/francoischalifour/medium-zoom\">\n    <img src=\"https://img.shields.io/travis/francoischalifour/medium-zoom.svg?style=flat-square\" alt=\"travis\">\n  </a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://medium-zoom.francoischalifour.com\">\n    <img src=\"https://user-images.githubusercontent.com/6137112/43369906-7623239a-9376-11e8-978b-6e089be499fb.gif\" alt=\"Medium Zoom Demo\">\n  </a>\n  <br>\n  <br>\n  <strong>\n  <a href=\"https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/website\">🔬 Playground</a> ・\n  <a href=\"https://medium-zoom.francoischalifour.com\">🔎 Demo</a> ・\n  <a href=\"https://medium-zoom.francoischalifour.com/storybook\">📚 Storybook</a>\n  </strong>\n</p>\n\n<details>\n  <summary><strong>Contents</strong></summary>\n\n<!--\nGenerate the table of contents using:\n\n```\nnpx doctoc README.md --maxlevel 3\n```\n-->\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [Selectors](#selectors)\n  - [Options](#options)\n  - [Methods](#methods)\n  - [Attributes](#attributes)\n  - [Events](#events)\n- [Examples](#examples)\n- [Debugging](#debugging)\n- [Browser support](#browser-support)\n- [Contributing](#contributing)\n- [License](#license)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n</details>\n\n## Features\n\n- 📱 **Responsive** — _scale on mobile and desktop_\n- 🚀 **Performant and lightweight** — _should be able to reach 60 [fps](https://en.wikipedia.org/wiki/Frame_rate)_\n- ⚡️ **High definition support** — _load the HD version of your image on zoom_\n- 🔎 **Flexibility** — _apply the zoom to a selection of images_\n- 🖱 **Mouse, keyboard and gesture friendly** — _click anywhere, press a key or scroll away to close the zoom_\n- 🎂 **Event handling** — _trigger events when the zoom enters a new state_\n- 📦 **Customization** — _set your own margin, background and scroll offset_\n- 🔧 **Pluggable** — _add your own features to the zoom_\n- 💎 **Custom templates** — _extend the default look to match the UI of your app_\n\n## Installation\n\nThe module is available on the [npm](https://www.npmjs.com) registry.\n\n```sh\nnpm install medium-zoom\n# or\nyarn add medium-zoom\n```\n\n###### Download\n\n- [Normal](https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.js)\n- [Minified](https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js)\n\n###### CDN\n\n- [jsDelivr](https://www.jsdelivr.com/package/npm/medium-zoom)\n- [unpkg](https://unpkg.com/medium-zoom/)\n\n## Usage\n\n> [Try it out in the browser](https://codesandbox.io/s/github/francoischalifour/medium-zoom/tree/master/website)\n\nImport the library as a module:\n\n```js\nimport mediumZoom from 'medium-zoom'\n```\n\nOr import the library with a script tag:\n\n```html\n<script src=\"node_modules/medium-zoom/dist/medium-zoom.min.js\"></script>\n```\n\nThat's it! You don't need to import any CSS styles.\n\nAssuming you add the `data-zoomable` attribute to your images:\n\n```js\nmediumZoom('[data-zoomable]')\n```\n\n## API\n\n```ts\nmediumZoom(selector?: string | HTMLElement | HTMLElement[] | NodeList, options?: object): Zoom\n```\n\n### Selectors\n\nThe selector allows attaching images to the zoom. It can be of the following types:\n\n- [CSS selectors](https://developer.mozilla.org/docs/Web/CSS/CSS_Selectors)\n- [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement)\n- [`NodeList`](https://developer.mozilla.org/docs/Web/API/NodeList)\n- [`Array`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)\n\n```js\n// CSS selector\nmediumZoom('[data-zoomable]')\n\n// HTMLElement\nmediumZoom(document.querySelector('#cover'))\n\n// NodeList\nmediumZoom(document.querySelectorAll('[data-zoomable]'))\n\n// Array\nconst images = [\n  document.querySelector('#cover'),\n  ...document.querySelectorAll('[data-zoomable]'),\n]\n\nmediumZoom(images)\n```\n\n### Options\n\nThe options enable the customization of the zoom. They are defined as an object with the following properties:\n\n| Property       | Type                                  | Default  | Description                                                                 |\n| -------------- | ------------------------------------- | -------- | --------------------------------------------------------------------------- |\n| `margin`       | `number`                              | `0`      | The space outside the zoomed image                                          |\n| `background`   | `string`                              | `\"#fff\"` | The background of the overlay                                               |\n| `scrollOffset` | `number`                              | `40`     | The number of pixels to scroll to close the zoom                            |\n| `container`    | `string` \\| `HTMLElement` \\| `object` | `null`   | The viewport to render the zoom in<br> [Read more →](docs/container.md)     |\n| `template`     | `string` \\| `HTMLTemplateElement`     | `null`   | The template element to display on zoom<br> [Read more →](docs/template.md) |\n\n```js\nmediumZoom('[data-zoomable]', {\n  margin: 24,\n  background: '#BADA55',\n  scrollOffset: 0,\n  container: '#zoom-container',\n  template: '#zoom-template',\n})\n```\n\n### Methods\n\n#### `open({ target?: HTMLElement }): Promise<Zoom>`\n\nOpens the zoom and returns a promise resolving with the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.open()\n```\n\n_Emits an event [`open`](#events) on animation start and [`opened`](#events) when completed._\n\n#### `close(): Promise<Zoom>`\n\nCloses the zoom and returns a promise resolving with the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.close()\n```\n\n_Emits an event [`close`](#events) on animation start and [`closed`](#events) when completed._\n\n#### `toggle({ target?: HTMLElement }): Promise<Zoom>`\n\nOpens the zoom when closed / dismisses the zoom when opened, and returns a promise resolving with the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.toggle()\n```\n\n#### `attach(...selectors: string[] | HTMLElement[] | NodeList[] | Array[]): Zoom`\n\nAttaches the images to the zoom and returns the zoom.\n\n```js\nconst zoom = mediumZoom()\n\nzoom.attach('#image-1', '#image-2')\nzoom.attach(\n  document.querySelector('#image-3'),\n  document.querySelectorAll('[data-zoomable]')\n)\n```\n\n#### `detach(...selectors: string[] | HTMLElement[] | NodeList[] | Array[]): Zoom`\n\nReleases the images from the zoom and returns the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.detach('#image-1', document.querySelector('#image-2')) // detach two images\nzoom.detach() // detach all images\n```\n\n_Emits an event [`detach`](#events) on the image._\n\n#### `update(options: object): Zoom`\n\nUpdates the options and returns the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.update({ background: '#BADA55' })\n```\n\n_Emits an event [`update`](#events) on each image of the zoom._\n\n#### `clone(options?: object): Zoom`\n\nClones the zoom with provided options merged with the current ones and returns the zoom.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]', { background: '#BADA55' })\n\nconst clonedZoom = zoom.clone({ margin: 48 })\n\nclonedZoom.getOptions() // => { background: '#BADA55', margin: 48, ... }\n```\n\n#### `on(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): Zoom`\n\nRegisters the listener on each target of the zoom.\n\nThe same `options` as [`addEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener#Parameters) are used.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.on('closed', event => {\n  // the image has been closed\n})\n\nzoom.on(\n  'open',\n  event => {\n    // the image has been opened (tracked only once)\n  },\n  { once: true }\n)\n```\n\nThe zoom object is accessible in `event.detail.zoom`.\n\n#### `off(type: string, listener: () => void, options?: boolean | AddEventListenerOptions): Zoom`\n\nRemoves the previously registered listener on each target of the zoom.\n\nThe same `options` as [`removeEventListener`](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener#Parameters) are used.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nfunction listener(event) {\n  // ...\n}\n\nzoom.on('open', listener)\n// ...\nzoom.off('open', listener)\n```\n\nThe zoom object is accessible in `event.detail.zoom`.\n\n#### `getOptions(): object`\n\nReturns the zoom options as an object.\n\n```js\nconst zoom = mediumZoom({ background: '#BADA55' })\n\nzoom.getOptions() // => { background: '#BADA55', ... }\n```\n\n#### `getImages(): HTMLElement[]`\n\nReturns the images attached to the zoom as an array of [`HTMLElement`s](https://developer.mozilla.org/docs/Web/API/HTMLElement).\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.getImages() // => [HTMLElement, HTMLElement]\n```\n\n#### `getZoomedImage(): HTMLElement`\n\nReturns the current zoomed image as an [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) or `null` if none.\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.getZoomedImage() // => null\nzoom.open().then(() => {\n  zoom.getZoomedImage() // => HTMLElement\n})\n```\n\n### Attributes\n\n#### `data-zoom-src`\n\nSpecifies the high definition image to open on zoom. This image loads when the user clicks on the source image.\n\n```html\n<img src=\"image-thumbnail.jpg\" data-zoom-src=\"image-hd.jpg\" alt=\"My image\" />\n```\n\n### Events\n\n| Event  | Description                                         |\n| ------ | --------------------------------------------------- |\n| open   | Fired immediately when the `open` method is called  |\n| opened | Fired when the zoom has finished being animated     |\n| close  | Fired immediately when the `close` method is called |\n| closed | Fired when the zoom out has finished being animated |\n| detach | Fired when the `detach` method is called            |\n| update | Fired when the `update` method is called            |\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.on('open', event => {\n  // track when the image is zoomed\n})\n```\n\nThe zoom object is accessible in `event.detail.zoom`.\n\n## Examples\n\n<details>\n <summary>Trigger a zoom from another element</summary>\n\n```js\nconst button = document.querySelector('[data-action=\"zoom\"]')\nconst zoom = mediumZoom('#image')\n\nbutton.addEventListener('click', () => zoom.open())\n```\n\n</details>\n\n<details>\n <summary>Track an event (for analytics)</summary>\n\nYou can use the `open` event to keep track of how many times a user interacts with your image. This can be useful if you want to gather some analytics on user engagement.\n\n```js\nlet counter = 0\nconst zoom = mediumZoom('#image-tracked')\n\nzoom.on('open', event => {\n  console.log(`\"${event.target.alt}\" has been zoomed ${++counter} times`)\n})\n```\n\n</details>\n\n<details>\n <summary>Detach a zoom once closed</summary>\n\n```js\nconst zoom = mediumZoom('[data-zoomable]')\n\nzoom.on('closed', () => zoom.detach(), { once: true })\n```\n\n</details>\n\n<details>\n <summary>Attach jQuery elements</summary>\n\njQuery elements are compatible with `medium-zoom` once converted to an array.\n\n```js\nmediumZoom($('[data-zoomable]').toArray())\n```\n\n</details>\n\n<details>\n <summary>Create a zoomable React component</summary>\n\n**Using React hooks**\n\n```js\nimport React from 'react'\nimport mediumZoom from 'medium-zoom'\n\nfunction ImageZoom({ zoom, src, alt, background }) {\n  const zoomRef = React.useRef(zoom.clone({ background }))\n\n  function attachZoom(image) {\n    zoomRef.current.attach(image)\n  }\n\n  return <img src={src} alt={alt} ref={attachZoom} />\n}\n\nfunction App() {\n  const zoom = React.useRef(mediumZoom({ background: '#000', margin: 48 }))\n\n  render() {\n    return (\n      <ImageZoom src=\"image.jpg\" alt=\"Image\" zoom={zoom.current} color=\"#BADA55\" />\n    )\n  }\n}\n```\n\n**Using React classes**\n\n```js\nimport React, { Component } from 'react'\nimport mediumZoom from 'medium-zoom'\n\nclass ImageZoom extends Component {\n  zoom = this.props.zoom.clone({\n    background: this.props.color,\n  })\n\n  attachZoom = image => {\n    this.zoom.attach(image)\n  }\n\n  render() {\n    return (\n      <img src={this.props.src} alt={this.props.alt} ref={this.attachZoom} />\n    )\n  }\n}\n\nclass App extends Component {\n  zoom = mediumZoom({ background: '#000', margin: 48 })\n\n  render() {\n    return (\n      <ImageZoom src=\"image.jpg\" alt=\"Image\" zoom={this.zoom} color=\"#BADA55\" />\n    )\n  }\n}\n```\n\n</details>\n<br>\n\nYou can see [more examples](examples/) including [React](examples/react) and [Vue](examples/vue), or check out the [storybook](https://medium-zoom.francoischalifour.com/storybook).\n\n## Debugging\n\n<details>\n <summary>The zoomed image is not visible</summary>\n\nThe library doesn't provide a `z-index` value on the zoomed image to avoid conflicts with other frameworks. Some frameworks might specify a `z-index` for their elements, which makes the zoomed image not visible.\n\nIf that's the case, you can provide a `z-index` value in your CSS:\n\n```css\n.medium-zoom-overlay,\n.medium-zoom-image--opened {\n  z-index: 999;\n}\n```\n\n</details>\n\n## Browser support\n\n| IE              | Edge            | Chrome | Firefox | Safari |\n| --------------- | --------------- | ------ | ------- | ------ |\n| 10<sup>\\*</sup> | 12<sup>\\*</sup> | 36     | 34      | 9      |\n\n<sup>\\*</sup> _These browsers require a [`template` polyfill](https://github.com/webcomponents/template) when using [custom templates](docs/template.md)_.\n\n<blockquote>\n  <p align=\"center\">\n    Cross-browser testing is sponsored by\n  </p>\n  <p align=\"center\">\n    <a href=\"https://www.browserstack.com\">\n      <img src=\"https://user-images.githubusercontent.com/6137112/44587083-35987000-a7b2-11e8-8e0d-8ba15de83802.png\" alt=\"BrowserStack\" height=\"35\">\n    </a>\n  </p>\n</blockquote>\n\n## Contributing\n\n- Run `yarn` to install Node dev dependencies\n- Run `yarn start` to build the library in watch mode\n- Run `yarn run storybook` to see your changes at http://localhost:9001\n\nPlease read the [contributing guidelines](CONTRIBUTING.md) for more detailed explanations.\n\n_You can also use [npm](https://www.npmjs.com)._\n\n## License\n\nMIT © [François Chalifour](https://francoischalifour.com)\n","readmeFilename":"README.md"}