{"_id":"inner-image-zoom","_rev":"3-fca94d88d546b6ddc68bb75b68694dc4","name":"inner-image-zoom","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"inner-image-zoom","version":"1.0.0","keywords":["vanilla","magnify","zoom","enlarge","image","responsive","photo","pdp","ecommerce"],"author":{"name":"Lauren Ashpole"},"license":"MIT","_id":"inner-image-zoom@1.0.0","maintainers":[{"name":"laurenashpole","email":"lauren@laurenashpole.com"}],"homepage":"https://github.com/laurenashpole/inner-image-zoom/packages/vanilla#readme","bugs":{"url":"https://github.com/laurenashpole/inner-image-zoom/issues"},"dist":{"shasum":"ba37cff617f3db3b6c9b98c4622fe783604e07c9","tarball":"https://registry.npmjs.org/inner-image-zoom/-/inner-image-zoom-1.0.0.tgz","fileCount":13,"integrity":"sha512-A5hcvxVwcMqqSP4X7j3bVP7tCSJdjQHo8E8k+iSuk9GHesMg4ckquWaVzIuphkfJS5GUfBMcnD/tXd9oiBp+NA==","signatures":[{"sig":"MEUCIHfirbGLXZO3RLCKtRo2icni904P/y3fp/NR75mPUFAcAiEAvmtSJv8WFRi4LAhMLoqNgT4z9VqJ/Uz1jBKK+MJs/Mg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":55818},"main":"lib/index.js","types":"./lib/index.d.ts","module":"src/index.js","types:":"src/index.d.ts","browser":"umd/index.js","gitHead":"3b1a2be6542e5434f1ecb1f14055131c8990328a","scripts":{"release":"release-it"},"_npmUser":{"name":"laurenashpole","email":"lauren@laurenashpole.com"},"release-it":{"git":{"tagName":"${npm.name}@${version}","commitMessage":"chore: release v${version}","tagAnnotation":"Release ${npm.name}@${version}"},"npm":{"skipChecks":true},"hooks":{"after:bump":"yarn --cwd='../..' build","before:init":"yarn --cwd='../..' test"}},"repository":{"url":"git+https://github.com/laurenashpole/inner-image-zoom.git","type":"git"},"_npmVersion":"8.11.0","description":"A lightweight Vanilla JS package for magnifying an image within its parent container 🔎","directories":{},"_nodeVersion":"16.15.1","publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/inner-image-zoom_1.0.0_1741303268048_0.44140016342702415","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"inner-image-zoom","version":"1.0.1","keywords":["vanilla","magnify","zoom","enlarge","image","responsive","photo","pdp","ecommerce"],"author":{"name":"Lauren Ashpole"},"license":"MIT","_id":"inner-image-zoom@1.0.1","maintainers":[{"name":"laurenashpole","email":"lauren@laurenashpole.com"}],"homepage":"https://github.com/laurenashpole/inner-image-zoom/packages/vanilla#readme","bugs":{"url":"https://github.com/laurenashpole/inner-image-zoom/issues"},"dist":{"shasum":"383a5b4054a74433bcbb7df7be6e32ca34b33468","tarball":"https://registry.npmjs.org/inner-image-zoom/-/inner-image-zoom-1.0.1.tgz","fileCount":13,"integrity":"sha512-L61FCFFRrVNFoTAZRQGPs8OJK5er3QLYP4aTo3VmyqynKiz5IquemueXizQ8huT8vI/d8gLBtjyziMNpH35dmA==","signatures":[{"sig":"MEUCIQCN3g0SeY9KKvZBGi5r+DcOI0azI4ZiZpSSoGJMJTdknAIgU72i+ZrmXoCNnWpWP7t8s4zj88H5fb580mfd27EZ/Zo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56000},"main":"lib/index.js","types":"./lib/index.d.ts","module":"src/index.js","types:":"src/index.d.ts","browser":"umd/index.js","gitHead":"3de1526fbb897f7312fba45f2c364c661bf5851e","scripts":{"release":"release-it"},"_npmUser":{"name":"laurenashpole","email":"lauren@laurenashpole.com"},"release-it":{"git":{"tagName":"${npm.name}@${version}","commitMessage":"chore: release ${npm.name} v${version}","tagAnnotation":"Release ${npm.name}@${version}"},"npm":{"skipChecks":true},"hooks":{"after:bump":"yarn --cwd='../..' build","before:init":"yarn --cwd='../..' test"}},"repository":{"url":"git+https://github.com/laurenashpole/inner-image-zoom.git","type":"git"},"_npmVersion":"8.11.0","description":"A lightweight Vanilla JS package for magnifying an image within its parent container 🔎","directories":{},"_nodeVersion":"16.15.1","publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/inner-image-zoom_1.0.1_1742406602062_0.2017765253449202","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"inner-image-zoom","version":"1.1.0","main":"lib/index.js","module":"src/index.js","types:":"src/index.d.ts","browser":"umd/index.js","author":{"name":"Lauren Ashpole"},"description":"A lightweight Vanilla JS package for magnifying an image within its parent container 🔎","homepage":"https://github.com/laurenashpole/inner-image-zoom/tree/main/packages/vanilla#readme","license":"MIT","repository":{"type":"git","url":"git+https://github.com/laurenashpole/inner-image-zoom.git"},"bugs":{"url":"https://github.com/laurenashpole/inner-image-zoom/issues"},"keywords":["vanilla","magnify","zoom","enlarge","image","responsive","photo","pdp","ecommerce"],"scripts":{"release":"release-it"},"publishConfig":{"registry":"https://registry.npmjs.org"},"release-it":{"hooks":{"before:init":"yarn --cwd='../..' test","after:bump":"yarn --cwd='../..' build"},"git":{"commitMessage":"chore: release ${npm.name} v${version}","tagName":"${npm.name}@${version}","tagAnnotation":"Release ${npm.name}@${version}"},"npm":{"skipChecks":true}},"gitHead":"39069ac54b12de70714229c50a550a9a2539a0bc","types":"./lib/index.d.ts","_id":"inner-image-zoom@1.1.0","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-iXHFx1WkeDMuHZrY+SRLcjkKkeNyC5GhIss8tM6VM9hxhjP+5ymizkrjrUMzerGlMrKV9qZLC28UTfx4nlmQQA==","shasum":"46042179485e18ecaf6b5987cd6de3f2e2bc5cbc","tarball":"https://registry.npmjs.org/inner-image-zoom/-/inner-image-zoom-1.1.0.tgz","fileCount":13,"unpackedSize":56351,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC+PAykI0h47VjheNk8Sq/gPYa7z37g49yppLrRaf9y8QIgMmN60zU9Gp+bKUvmiq5h4cKmpTZbPH2/fvom/NExdHU="}]},"_npmUser":{"name":"laurenashpole","email":"lauren@laurenashpole.com"},"directories":{},"maintainers":[{"name":"laurenashpole","email":"lauren@laurenashpole.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/inner-image-zoom_1.1.0_1789083066869_0.3805133673516017"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-06T23:21:08.047Z","modified":"2026-09-10T23:31:07.181Z","1.0.0":"2025-03-06T23:21:08.238Z","1.0.1":"2025-03-19T17:50:02.239Z","1.1.0":"2026-09-10T23:31:07.011Z"},"bugs":{"url":"https://github.com/laurenashpole/inner-image-zoom/issues"},"author":{"name":"Lauren Ashpole"},"license":"MIT","homepage":"https://github.com/laurenashpole/inner-image-zoom/tree/main/packages/vanilla#readme","keywords":["vanilla","magnify","zoom","enlarge","image","responsive","photo","pdp","ecommerce"],"repository":{"type":"git","url":"git+https://github.com/laurenashpole/inner-image-zoom.git"},"description":"A lightweight Vanilla JS package for magnifying an image within its parent container 🔎","maintainers":[{"name":"laurenashpole","email":"lauren@laurenashpole.com"}],"readme":"# inner-image-zoom\n\n[![GitHub Actions][build-badge]][build] [![NPM][npm-badge]][npm]\n\nA lightweight Vanilla JavaScript package for magnifying an image within its original container.\n\n[Demos](https://innerimagezoom.com/) | [Changelog](https://github.com/laurenashpole/inner-image-zoom/blob/main/packages/vanilla/CHANGELOG.md)\n\n## Installation\n\n### NPM\n```javascript\nnpm install inner-image-zoom\n```\n\n### Yarn\n```javascript\nyarn add inner-image-zoom\n```\n\n### CDN\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/inner-image-zoom@1.0.1/umd/index.min.js\"></script>\n```\n\n### TypeScript\n[Type declarations](https://github.com/laurenashpole/inner-image-zoom/blob/main/packages/vanilla/src/index.d.ts) were added with version 1.0.0.\n\n### Styling\n\nYou can download the raw [styles.css](https://raw.githubusercontent.com/laurenashpole/inner-image-zoom/main/packages/vanilla/src/styles.css) file or, if your build supports it, import the stylesheet directly from `node_modules` using:\n\n```javascript\nimport 'inner-image-zoom/lib/styles.min.css';\n```\n\n## Usage\n\n### HTML\n\nInitializing Inner Image Zoom requires an `img` tag and selector (either custom or the default `iiz`). The `img` tag can be standalone:\n\n```html\n<img class=\"iiz\" src=\"/path/to/image-2x.jpg\" />\n```\n\nOr in a container:\n\n```html\n<div class=\"iiz\">\n  <img src=\"/path/to/image.jpg\" />\n</div>\n```\n\nOptions may be applied to specific instances using data attributes:\n\n```html\n<div class=\"iiz\" data-move-type=\"drag\">\n  <img src=\"/path/to/image.jpg\" />\n</div>\n```\n\nAny content within the container will be preserved. This is useful for responsive images or adding custom image spacers or loading states:\n\n```html\n<picture class=\"iiz\" data-zoom-src=\"/path/to/zoom-image.jpg\">\n  <source\n    srcset=\"/path/to/large-image.jpg, /path/to/large-image-2x.jpg 2x\"\n    media=\"(min-width: 500px)\"\n  />\n  <img\n    srcset=\"/path/to/small-image.jpg, /path/to/small-image-2x.jpg 2x\"\n    src=\"/path/to/image.jpg\"\n  />\n</picture>\n```\n\n### JS\n\nStart by importing and initializing:\n\n```javascript\nimport InnerImageZoom from 'inner-image-zoom';\n\n...\n\nnew InnerImageZoom();\n```\n\nYou can also initialize with a custom selector or options object:\n\n```javascript\nnew InnerImageZoom('.selector', {\n  zoomScale: 0.9,\n  moveType: 'drag',\n  hideCloseButton: true,\n  hideHint: true\n});\n```\n\n## Options\n\nOption | Type | Default | Description\n--- | --- | --- | ---\nzoomSrc | string | | URL for the larger zoom image. Falls back to original image src if not defined.\nzoomScale | number | 1 | Multiplied against the natural width and height of the zoomed image. This will generally be a decimal (example, 0.9 for 90%).\nzoomPreload | boolean | false | If set to true, preloads the zoom image instead of waiting for mouseenter and (unless on a touch device) persists the image on mouseleave.\nmoveType | `pan` or `drag` | pan | The user behavior for moving zoomed images on non-touch devices.\nzoomType | `click` or `hover` | click | The user behavior for triggering zoom. When using `hover`, combine with `zoomPreload` to avoid flickering on rapid mouse movements.\nfadeDuration | number | 150 | Fade transition time in milliseconds. If zooming in on transparent images, set this to `0` for best results.\nfullscreenOnMobile | boolean | false | Enables fullscreen zoomed image on touch devices below a specified breakpoint.\nmobileBreakpoint | number | 640 | The maximum breakpoint for fullscreen zoom image when fullscreenOnMobile is true.\nhideCloseButton | boolean | false | Hides the close button on touch devices. If set to true, zoom out is triggered by tap.\nhideHint | boolean | false | Hides the magnifying glass hint.\nafterZoomIn | () => void | | Function to be called after zoom in.\nafterZoomOut | () => void | | Function to be called after zoom out.\n\n## Methods\n\n- `reinit` - Reinitialize an InnerImageZoom instance with new options.\n- `uninit` - Unitialize an InnerImageZoom instance.\n\n## Issues\n\nPlease submit bugs or requests on the [GitHub issues page](https://github.com/laurenashpole/inner-image-zoom/issues) and make sure to use the `vanilla` label.\n\n## License\n\n[MIT](https://github.com/laurenashpole/inner-image-zoom/blob/main/LICENSE)\n\n[npm-badge]: http://img.shields.io/npm/v/inner-image-zoom.svg?style=flat\n[npm]: https://www.npmjs.com/package/inner-image-zoom\n\n[build-badge]: https://github.com/laurenashpole/inner-image-zoom/actions/workflows/release.yml/badge.svg\n[build]: https://github.com/laurenashpole/inner-image-zoom/actions\n\n[types-badge]: https://badgen.net/npm/types/inner-image-zoom\n","readmeFilename":"README.md"}