Click/Hover to Zoom

Anki Card Design
2

I wrote the below to display all images within the element with class name yourClassName as a modal dialogue on click:

Back card template:

<dialog data-image-modal></dialog>

<script>
  (function () {
    let all_images = document.querySelectorAll(".yourClassName img");
    let image_modal = document.querySelector("dialog[data-image-modal]");

    all_images.forEach((image) => {
      image.addEventListener("click", (e) => {
        image_modal.innerHTML = `<img src="${image.src}" />`;
        image_modal.showModal();
      });
    });

    image_modal.addEventListener("click", (e) => {
      if (e.target === image_modal) {
        image_modal.close();
      }
    });
  })();
</script>

CSS:

/* Get rid of 3px gap at the bottom of images due to inline behaviour */
img {
	vertical-align: bottom;
}

dialog {
	border: none;
	padding: 0;
}
4 Likes