Demo Image Gallery dengan Efek Zoom-in Zoom-out

Bagi pengguna Blogger yang belum faham cara penempatannya, silahkan scroll ke bawah untuk Tutorialnya

Langkah-langkah Pembuatan Image Gallery

1. Masuk ke Blogger -> Tema -> Edit HTML (klik panah kecil di samping tulisan SESUAIKAN). Masukan kode ini di atas ]]></b:skin>, kalau tidak ketemu, simpan di atas </style>.

   /* MODAL */
   .modal {
     display: none;
     position: fixed;
     inset: 0;
     background: #fff;
     z-index: 999;
     justify-content: center;
     align-items: center;
     cursor: zoom-out;
   }
   .modal-content {
     max-width: 95%;
     max-height: 95%;
     animation: zoomIn 0.25s ease;
   }
   @keyframes zoomIn {
     from { transform: scale(0.8); }
     to   { transform: scale(1); }
   }

2. Simpan kode ini sebelum </body>

   <script>
   //<![CDATA[ 
   const modal = document.getElementById("imgModal");
   const modalImg = document.getElementById("modalImg");
   const images = document.querySelectorAll(".grid-img");
   images.forEach(img => {
     img.addEventListener("click", () => {
       modal.style.display = "flex";
       modalImg.src = img.src;
     });
   });
   modal.addEventListener("click", () => {
     modal.style.display = "none";
   });
   //]]>
   </script>

3. Simpan Template
4. Untuk membuat galery, buat postingan baru. Gante ke -> Tampilan HTM, simpan kode ini

   <div class="gallery">
     <img src="https://tutorial.kangis.my.id/img/burung.jpg" class="grid-img">
     <img src="https://tutorial.kangis.my.id/img/katak.jpg" class="grid-img">
     <img src="https://tutorial.kangis.my.id/img/yak.jpg" class="grid-img">
     <img src="https://tutorial.kangis.my.id/img/tupai.jpg" class="grid-img">
   </div>
   
   <div id="imgModal" class="modal">
     <img class="modal-content" id="modalImg">
   </div>

   Ganti gambar dengan URL kalian.

Silahkan ditanyakan apabila belum faham..