YAMZ is a lightbox library heavily inspired by Medium.

It provides an easy way to add smooth, minimalistic, and highly customizable Medium-like zooming to your images.

To use the library, you simply tell it which images to bind to:

import yamz from "yet-another-medium-zoom";

const $images = [...document.querySelectorAll("img, picture")];
yamz.bind($images);

That's it. The library will automatically extract the appropriate high-res source from your images if you are using srcset, and will otherwise just use the image's own source (or a high-res source you specify).

If you want to have more control over what's displayed, you may want to change some of the options. You can set an option globally, or you can specify the options on a per-image basis. This can be done in JavaScript when you open the lightbox, or in HTML by specifying the options on the image you bind to as data attributes.

<!-- set the options as data attributes -->
<img src="example.png" data-scroll-allowance="-1" data-duration="600" />

/* or specify them when you open the lightbox programmatically */
import yamz from "yet-another-medium-zoom";

yamz.setOptions({
    // set options globally
    /* ... */
});
const $img = document.querySelector("img");
yamz.open($img, {
    // set options on a per-image basis
    /* ... */
});

The following options are available:

There are two main ways to perform more in-depth customization of the lightbox:

You can style the lightbox however you want by simply using CSS to overwrite the built-in styles. You can also change the DOM structure of the lightbox by using the lightboxGenerator option, which lets you completely change what the lightbox contains. You can see an example of this on the project website. The animation will automatically adapt to your new styles.

Plugins can be created if you need more advanced control. These are implemented as functions that augment a given YAMZ instance with whatever features the plugin implements. These plugins can then be composited if you want to use more than one at a time. An example of this can be seen in our main export.

Both the caption and album support are actually implemented as plugins (that are enabled by default), so if you want to create your own plugin it might be useful to reference the implementation of the caption or album plugins.