Click/Hover to Zoom

Card Design
1

I used a deck once where if you clicked on one of the images it zoomed in, but for the life of me I can’t figure out how to do that. I have another deck where the First Aid pictures don’t get zoomed in, they just kind of pop out if that makes sense. That deck I recall also let you zoom in by just hovering over it without clicking, if you messed with the code a bit. If anyone could help me with the code I would really appreciate it. Thank you.

1 Like
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
3

Oh wow! Thank you so much!

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.