Accessible medium.com-style image zoom for Svelte
npm install svelte-medium-image-zoom



The original medium.com-inspired image zooming library for Svelte.\
View the storybook examples
to see various usages.
Features:
- Requirements to know about: - `` Note: component type props are rendered as snippets // Accessible label text for when you want to zoom. // Your image (required). // Custom CSS class to add to the unzoom and zoom buttons. // Custom CSS class to add to the zoomed // Transition duration for modal image and overlay elements. // Provide your own unzoom button icon. // Provide your own zoom button icon. // Tell the component whether or not it should be zoomed. // Listen for hints from the component about when you // Specify what type of element should be used for or // Provide your own custom modal content component. // Offset in pixels the zoomed image should Import the component and the CSS, wrap your image with the component, and the `, including all object-fit
values, any object-position,
and loading="lazy"
- ` and with any background-image,
background-size,
and background-position
- with and (coming)
- with (coming)
- (coming)
- Custom zoom modal content (👇)
- Zero dependencies element (caniuse dialog)
- ResizeObserver (caniuse ResizeObserver)
- Package build target is ESNext. If you need to support older environments,
run this package through your build system.Quickstart
bash`
npm install --save svelte-medium-image-zoom
`svelte
alt="That Wanaka Tree, New Zealand by Laura Smetsers"
src="/media/andres-iga.jpg"
width="500"
/>
`API
, check this for more.\
example use
`ts
export interface ZoomProps {
// Accessible label text for when you want to unzoom.
// Default: 'Minimize image'
a11y_name_button_unzoom?: string;
// Default: 'Expand image'
a11y_name_button_zoom?: string;
children: Snippet<[]>;
class_button?: string;
// Default: 300ms
duration?: string | number;
// Default: ICompress
icon_unzoom?: Snippet<[]>;
// Default: IEnlarge
icon_zoom?: Snippet<[]>;
// Default: false
is_zoomed?: boolean;
// should zoom (true value) or unzoom (false value).
on_zoom_change?: (value: boolean) => void;
// internal component usage. This is useful if the
// image is inside a
zoom_content?: Snippet<[{
img: Snippet<[]>;
button_unzoom: Snippet<[]>;
modal_state: IModalState;
handle_unzoom: () => void;
}]>;
// be from the window's boundaries.
// Default: 0
zoom_margin?: number;
}
`Basic Usage
component will handle it's own state.svelte
alt="That Wanaka Tree, New Zealand by Laura Smetsers"
src="/path/to/thatwanakatree.jpg"
width="500"
/>
aria-label="That Wanaka Tree, New Zealand by Laura Smetsers"
role="img"
class="div-img"
style="
background-color: #fff;
background-image: url(/media/laura-smetsers.jpg);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
width: 500px;
height: 300px;
"
>
Import 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.
`svelte
on_zoom_change={(z) => (is_zoomed = z)}
wrap_element="span"
zoom_margin={25}
>
alt="That Wanaka Tree, New Zealand by Laura Smetsers"
src="/path/to/thatwanakatree.jpg"
width="500"
decoding="async"
loading="lazy"
/>
`
The on_zoom_change prop accepts a callback that will receive true or false
based on events that occur (like click or scroll events) to assist you in
determining when to zoom and unzoom the component.
You can import the default styles from svelte-medium-image-zoom/dist/styles.cssrem
and override the values from your code, or you can copy the styles.css
file and alter it to your liking. The latter is the best
option, given s should be used instead of px to account for different
default browser font sizes, and it's hard for a library to guess at what these
values should be.
An example of customizing the transition duration, timing function, overlay
background color, and unzoom button styles with :focus-visible can be found in
this story: custom-modal-styles.
If you want to customize the zoomed modal experience with a caption, form, or
other set of components, you can do so by providing a custom component to the
zoom_content prop.
View the live example of custom zoom modal content.
Below is some example code that demonstrates how to use this feature.
`svelte
{#snippet zoom_content({ img, button_unzoom, modal_state })}
{@render button_unzoom()}
{@render img()}
class:zoom-caption--loaded={modal_state === 'LOADED'}
>
That Wanaka Tree, also known as the Wanaka Willow, is a willow tree located at the
southern end of Lake Wānaka in the Otago region of New Zealand.
Wikipedia, className="zoom-caption-link"
href="https://en.wikipedia.org/wiki/That_Wanaka_Tree"
>
That Wanaka Tree
{/snippet}
alt="That Wanaka Tree, New Zealand by Laura Smetsers"
src="/path/to/thatwanakatree.jpg"
width="500"
decoding="async"
loading="lazy"
/>
`
This project is inspired from rpearce's react-medium-image-zoom` library.