Cacher is the code snippet organizer for pro developers

import mediumZoom from 'medium-zoom';

/**
 * medium zoom（画像の拡大処理）
 * @returns {boolean}
 */
const setMediumZoom = () => {
  const zoom = mediumZoom('[data-zoomable]', {
    margin: 15,
    background: 'rgba(255,255,255,.9)',
  });
  const zoomEls = zoom.getImages();

  if (zoomEls.length < 1) {
    return false;
  }

  //拡大ボタンでもmedium zoomを機能させる
  zoomEls.forEach((zoomEl) => {
    const zoomBtnWrap = zoomEl.nextElementSibling;

    if (zoomBtnWrap === null || !zoomBtnWrap.classList.contains('imageBlock_zoom')) {
      return false;
    }

    const zoomBtn = zoomBtnWrap.firstElementChild;
    zoomBtn.addEventListener('click', (el) => {
      el.preventDefault();
      zoom.open({
        target: zoomEl
      });
    });
  });
};

figure.imageBlock
  figcaption キャプションが入ります画像のキャプションが入ります。キャプションが入ります画像のキャプションが入ります。
  img(src="https://placehold.jp/1000x360.png", data-zoom-src="https://placehold.jp/1500x540.png", alt="", data-zoomable)
  p.imageBlock_zoom: button: span 拡大