{"id":28762680,"url":"https://github.com/stabldev/svelte-medium-image-zoom","last_synced_at":"2025-06-17T08:09:05.869Z","repository":{"id":270596421,"uuid":"909744032","full_name":"stabldev/svelte-medium-image-zoom","owner":"stabldev","description":"The original medium.com-inspired image zooming library for Svelte.","archived":false,"fork":false,"pushed_at":"2025-06-02T08:08:19.000Z","size":6018,"stargazers_count":14,"open_issues_count":11,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T01:41:38.166Z","etag":null,"topics":["image-zoom","medium","medium-image","props","svelte","sveltejs","typescript","zoom","zoom-images","zoomable"],"latest_commit_sha":null,"homepage":"https://moonlitgrace.github.io/svelte-medium-image-zoom","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stabldev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-29T16:45:46.000Z","updated_at":"2025-06-13T10:23:55.000Z","dependencies_parsed_at":"2025-03-26T17:28:34.840Z","dependency_job_id":"9ed2bc13-df56-4089-8f9f-54cb750f34c0","html_url":"https://github.com/stabldev/svelte-medium-image-zoom","commit_stats":null,"previous_names":["moonlitgrace/svelte-medium-image-zoom","stabldev/svelte-medium-image-zoom"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/stabldev/svelte-medium-image-zoom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabldev%2Fsvelte-medium-image-zoom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabldev%2Fsvelte-medium-image-zoom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabldev%2Fsvelte-medium-image-zoom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabldev%2Fsvelte-medium-image-zoom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stabldev","download_url":"https://codeload.github.com/stabldev/svelte-medium-image-zoom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stabldev%2Fsvelte-medium-image-zoom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260318724,"owners_count":22991124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["image-zoom","medium","medium-image","props","svelte","sveltejs","typescript","zoom","zoom-images","zoomable"],"created_at":"2025-06-17T08:09:02.836Z","updated_at":"2025-06-17T08:09:05.843Z","avatar_url":"https://github.com/stabldev.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-medium-image-zoom\n\n[![NPM Version](https://img.shields.io/npm/v/svelte-medium-image-zoom?style=flat-square)](https://www.npmjs.com/package/svelte-medium-image-zoom)\n[![NPM License](https://img.shields.io/npm/l/svelte-medium-image-zoom?style=flat-square)](https://www.npmjs.com/package/svelte-medium-image-zoom)\n[![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/svelte-medium-image-zoom?style=flat-square)](https://www.npmjs.com/package/svelte-medium-image-zoom)\n[![NPM Downloads](https://img.shields.io/npm/dm/svelte-medium-image-zoom?style=flat-square)](https://www.npmjs.com/package/svelte-medium-image-zoom)\n\nThe original [medium.com-inspired image zooming](https://medium.design/image-zoom-on-medium-24d146fc0c20) library for [Svelte](https://svelte.dev/).\\\n[View the storybook examples](https://moonlitgrace.github.io/svelte-medium-image-zoom/)\nto see various usages.\n\nFeatures:\n\n- `\u003cimg /\u003e`, including all [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)\n  values, any [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position),\n  and [`loading=\"lazy\"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)\n- `\u003cdiv\u003e` and `\u003cspan\u003e` with any [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image),\n  [`background-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size),\n  and [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position)\n- `\u003cpicture\u003e` with `\u003csource /\u003e` and `\u003cimg /\u003e` (coming)\n- `\u003cfigure\u003e` with `\u003cimg /\u003e` (coming)\n- `\u003csvg\u003e` (coming)\n- [Custom zoom modal content](#custom-zoom-modal-content) (👇)\n- Zero `dependencies`\n\nRequirements to know about:\n\n- `\u003cdialog\u003e` element ([caniuse dialog](https://caniuse.com/dialog))\n- `ResizeObserver` ([caniuse ResizeObserver](https://caniuse.com/mdn-api_resizeobserver))\n- Package build target is `ESNext`. If you need to support older environments,\n  run this package through your build system.\n\n## Quickstart\n\n```bash\nnpm install --save svelte-medium-image-zoom\n```\n\n\u003c!-- prettier-ignore-start --\u003e\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import Zoom from 'svelte-medium-image-zoom';\n  import 'svelte-medium-image-zoom/dist/styles.css';\n\u003c/script\u003e\n\n\u003cZoom\u003e\n  \u003cimg\n    alt=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n    src=\"/media/andres-iga.jpg\"\n    width=\"500\"\n  /\u003e\n\u003c/Zoom\u003e\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n## API\n\nNote: component type props are rendered as `snippets`, check [this](https://svelte.dev/docs/svelte/snippet) for more.\\\n[example use](https://github.com/moonlitgrace/svelte-medium-image-zoom/pull/17)\n\n\u003c!-- prettier-ignore-start --\u003e\n```ts\nexport interface ZoomProps {\n  // Accessible label text for when you want to unzoom.\n  // Default: 'Minimize image'\n  a11y_name_button_unzoom?: string;\n\n  // Accessible label text for when you want to zoom.\n  // Default: 'Expand image'\n  a11y_name_button_zoom?: string;\n\n  // Your image (required).\n  children: Snippet\u003c[]\u003e;\n\n  // Custom CSS class to add to the unzoom and zoom buttons.\n  class_button?: string;\n\n  // Custom CSS class to add to the zoomed \u003cdialog\u003e.\n  class_dialog?: string;\n\n  // Transition duration for modal image and overlay elements.\n  // Default: 300ms\n  duration?: string | number;\n\n  // Provide your own unzoom button icon.\n  // Default: ICompress\n  icon_unzoom?: Snippet\u003c[]\u003e;\n\n  // Provide your own zoom button icon.\n  // Default: IEnlarge\n  icon_zoom?: Snippet\u003c[]\u003e;\n\n  // Tell the component whether or not it should be zoomed.\n  // Default: false\n  is_zoomed?: boolean;\n\n  // Listen for hints from the component about when you\n  // should zoom (`true` value) or unzoom (`false` value).\n  on_zoom_change?: (value: boolean) =\u003e void;\n\n  // Specify what type of element should be used for\n  // internal component usage. This is useful if the\n  // image is inside a \u003cp\u003e or \u003cbutton\u003e, for example.\n  // Default: 'div'\n  wrap_element?: 'div' | 'span';\n\n  // Provide your own custom modal content component.\n  zoom_content?: Snippet\u003c[{\n    img: Snippet\u003c[]\u003e;\n    button_unzoom: Snippet\u003c[]\u003e;\n    modal_state: IModalState;\n    handle_unzoom: () =\u003e void;\n  }]\u003e;\n\n  // Offset in pixels the zoomed image should\n  // be from the window's boundaries.\n  // Default: 0\n  zoom_margin?: number;\n}\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n## Basic Usage\n\nImport the component and the CSS, wrap your image with the component, and the\ncomponent will handle it's own state.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import Zoom from 'svelte-medium-image-zoom';\n  import 'svelte-medium-image-zoom/dist/styles.css';\n\u003c/script\u003e\n\n\u003c!-- \u003cimg /\u003e --\u003e\n\u003cZoom\u003e\n  \u003cimg\n    alt=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n    src=\"/path/to/thatwanakatree.jpg\"\n    width=\"500\"\n  /\u003e\n\u003c/Zoom\u003e\n\n\u003c!-- \u003cdiv\u003e --\u003e\n\u003cZoom\u003e\n  \u003cdiv\n    aria-label=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n    role=\"img\"\n    class=\"div-img\"\n    style=\"\n      background-color: #fff;\n      background-image: url(/media/laura-smetsers.jpg);\n      background-position: 50%;\n      background-repeat: no-repeat;\n      background-size: cover;\n      width: 500px;\n      height: 300px;\n    \"\n  \u003e\u003c/div\u003e\n\u003c/Zoom\u003e\n```\n\n### Controlled usage\n\nImport the component and the CSS, wrap your image with the component, and then dictate the `is_zoomed` with `on_zoom_change` handler state to the component.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import Zoom from 'svelte-medium-image-zoom';\n  import 'svelte-medium-image-zoom/dist/styles.css';\n\n  let is_zoomed = $state(false);\n\u003c/script\u003e\n\n\u003cZoom\n  {is_zoomed}\n  on_zoom_change={(z) =\u003e (is_zoomed = z)}\n  wrap_element=\"span\"\n  zoom_margin={25}\n\u003e\n  \u003cimg\n    alt=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n    src=\"/path/to/thatwanakatree.jpg\"\n    width=\"500\"\n    decoding=\"async\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/Zoom\u003e\n```\n\nThe `on_zoom_change` prop accepts a callback that will receive `true` or `false`\nbased on events that occur (like click or scroll events) to assist you in\ndetermining when to zoom and unzoom the component.\n\n## Styles\n\nYou can import the default styles from `svelte-medium-image-zoom/dist/styles.css`\nand override the values from your code, or you can copy [the styles.css\nfile](./src/lib/styles.css) and alter it to your liking. The latter is the best\noption, given `rem`s should be used instead of `px` to account for different\ndefault browser font sizes, and it's hard for a library to guess at what these\nvalues should be.\n\nAn example of customizing the transition duration, timing function, overlay\nbackground color, and unzoom button styles with `:focus-visible` can be found in\nthis story: [custom-modal-styles](https://moonlitgrace.github.io/svelte-medium-image-zoom/?path=/story/img--custom-modal-styles).\n\n## Custom zoom modal content\n\nIf you want to customize the zoomed modal experience with a caption, form, or\nother set of components, you can do so by providing a custom component to the\n`zoom_content` prop.\n\n[View the live example of custom zoom modal content.](https://moonlitgrace.github.io/svelte-medium-image-zoom/?path=/story/img--modal-figure-caption)\n\nBelow is some example code that demonstrates how to use this feature.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import Zoom from 'svelte-medium-image-zoom';\n  import 'svelte-medium-image-zoom/dist/styles.css';\n\u003c/script\u003e\n\n\u003cZoom\u003e\n  {#snippet zoom_content({ img, button_unzoom, modal_state })}\n    {@render button_unzoom()}\n    \u003cfigure\u003e\n      {@render img()}\n      \u003cfigcaption\n        class=\"zoom-caption zoom-caption--bottom\"\n        class:zoom-caption--loaded={modal_state === 'LOADED'}\n      \u003e\n        That Wanaka Tree, also known as the Wanaka Willow, is a willow tree located at the\n        southern end of Lake Wānaka in the Otago region of New Zealand.\n        \u003ccite className=\"zoom-caption-cite\"\u003e\n          Wikipedia, \u003ca\n            className=\"zoom-caption-link\"\n            href=\"https://en.wikipedia.org/wiki/That_Wanaka_Tree\"\n          \u003e\n            That Wanaka Tree\n          \u003c/a\u003e\n        \u003c/cite\u003e\n      \u003c/figcaption\u003e\n    \u003c/figure\u003e\n  {/snippet}\n  \u003cimg\n    alt=\"That Wanaka Tree, New Zealand by Laura Smetsers\"\n    src=\"/path/to/thatwanakatree.jpg\"\n    width=\"500\"\n    decoding=\"async\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/Zoom\u003e\n```\n\n## Credits\n\nThis project is inspired from [rpearce](https://github.com/rpearce)'s [`react-medium-image-zoom`](https://github.com/rpearce/react-medium-image-zoom) library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabldev%2Fsvelte-medium-image-zoom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstabldev%2Fsvelte-medium-image-zoom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstabldev%2Fsvelte-medium-image-zoom/lists"}