eleventy-plugin-img-magnifier/.eleventy.js

zoom image to fullscreen

export default function (eleventyConfig) {
  eleventyConfig.addPlugin(function imgMagnifier(eleventyConfig) {
    eleventyConfig.addShortcode("imgmagnifier", function () {
      return `
              <style>
              img {
                cursor: zoom-in;
              }
              
              /*   Closed state of the dialog   */
              dialog {
                opacity: 0;
                transform: scale(.75);
                align-content: center;
                transition: transform .35s ease-out, opacity .35s ease-out, display .35s ease-out, overlay .35s ease-out;
                transition-behavior: allow-discrete;

                /*   Open state of the dialog  */
                &[open] {
                  opacity: 1;
                  transform: scale(1);
                  padding: 0;
                  margin-inline: auto;
                  margin-block: auto;
                  border: none;
                  width: 80vw;
                  background: none;
                  /* Before opening state */
                  @starting-style {
                    opacity: 0;
                    transform: scale(.75);
                  }
                }
                &:focus {
                    outline: none;
                }
                & img {
                  margin: 0 auto !important;
                  border-radius: 0!important;
                  max-width: 100%;
                  width: 100%;
                  height: auto;
                  display: block;
                  object-fit: contain;
                } 
              }
              
              
              /* Transition the :backdrop when the dialog modal is promoted to the top layer */
              dialog::backdrop {
                background-color: rgb(0 0 0 / 0%);
                backdrop-filter: blur(0px);
                transition: backdrop-filter 0.2s, background-color 0.2s;
                transition-behavior: allow-discrete;
              }
              
              dialog[open]::backdrop {
                background-color: rgb(0 0 0 / 30%);
                backdrop-filter: blur(2px);
              }
              
              /* This starting-style rule cannot be nested inside the above selector
              because the nesting selector cannot represent pseudo-elements. */
              
              @starting-style {
                dialog[open]::backdrop {
                  background-color: rgb(0 0 0 / 0%);
                  backdrop-filter: blur(0px);
                }
              }
              </style>
              <script defer>
              document.addEventListener('DOMContentLoaded', () => {
              let imgs = document.querySelectorAll('img')

              imgs.forEach(img => {
                  img.addEventListener('click', ()=>{
                      let parent = img.parentNode
                      let newImg = img.cloneNode()
                      let dialog = document.createElement('dialog')
                      dialog.setAttribute("closedby", "any")
                      dialog.appendChild(newImg)
                      parent.appendChild(dialog)
                      dialog.showModal()

                      dialog.addEventListener('click', (event)=>{
                          if (event.target == dialog) {
                              dialog.close();
                              dialog.remove()
                            }
                      })
                      dialog.addEventListener('close', () => {
                        dialog.remove();
                      });
                  })
              });
              })
              </script>
            `;
    });
  });
}