Merge pull request #6 from dewanakl/Add-modal-foto

feat: add modal foto
dewanakl · Jun 12, 2023 · 915489e · 915489e
2 parents 15e3150 + 3ba60df
commit 915489e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -75,7 +75,7 @@
                 <h1 class="font-estetik my-4" style="font-size: 2.2rem;">Undangan Pernikahan</h1>
                 <div class="py-4">
                     <div class="cropper border border-3 border-light shadow mx-auto">
-                        <img src="assets/images/bg.jpeg" alt="bg">
+                        <img src="assets/images/bg.jpeg" alt="bg" onclick="modalFoto(this)">
                     </div>
                 </div>
                 <h1 class="font-estetik my-4" style="font-size: 3rem;">Wahyu & Riski</h1>
@@ -109,7 +109,7 @@ <h1 class="font-estetik py-4 px-2">Assalamualaikum Warahmatullahi Wabarakatuh</h
                 <div class="overflow-x-hidden">
                     <div data-aos="fade-right" data-aos-duration="2000">
                         <div class="cropper border border-3 border-light shadow my-4 mx-auto">
-                            <img src="assets/images/cowo.png" alt="bg">
+                            <img src="assets/images/cowo.png" alt="bg" onclick="modalFoto(this)">
                         </div>
                         <h1 class="font-estetik" style="font-size: 3rem;">Wahyu Siapa</h1>
                         <h5 class="mt-3 mb-0">Putra</h5>
@@ -120,7 +120,7 @@ <h1 class="font-estetik my-4" style="font-size: 4rem;">&</h1>
 
                     <div data-aos="fade-left" data-aos-duration="2000">
                         <div class="cropper border border-3 border-light shadow my-4 mx-auto">
-                            <img src="assets/images/cewe.png" alt="bg">
+                            <img src="assets/images/cewe.png" alt="bg" onclick="modalFoto(this)">
                         </div>
                         <h1 class="font-estetik" style="font-size: 3rem;">Riski Siapa</h1>
                         <h5 class="mt-3 mb-0">Putri</h5>
@@ -216,13 +216,13 @@ <h1 class="font-estetik text-center py-3" data-aos="fade-down" data-aos-duration
 
                         <div class="carousel-inner rounded-4">
                             <div class="carousel-item active">
-                                <img src="https://picsum.photos/1280/720?random=1" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=1" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=2" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=2" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=3" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=3" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                         </div>
 
@@ -246,13 +246,13 @@ <h1 class="font-estetik text-center py-3" data-aos="fade-down" data-aos-duration
 
                         <div class="carousel-inner rounded-4">
                             <div class="carousel-item active">
-                                <img src="https://picsum.photos/1280/720?random=4" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=4" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=5" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=5" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                             <div class="carousel-item">
-                                <img src="https://picsum.photos/1280/720?random=6" class="d-block w-100">
+                                <img src="https://picsum.photos/1280/720?random=6" class="d-block w-100" onclick="modalFoto(this)">
                             </div>
                         </div>
 
@@ -414,6 +414,21 @@ <h1 class="font-estetik" data-aos="fade-up" data-aos-duration="2000">Wassalamual
         </div>
     </div>
 
+    <div class="modal fade" id="modalFoto" tabindex="-1" aria-labelledby="modalFotoLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                        <img src="" class="w-100" alt="foto" id="showModalFoto">
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="modal" id="exampleModal" tabindex="-1" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered modal-fullscreen m-0">
             <div class="modal-content m-0 p-0">

diff --git a/js/app.js b/js/app.js
@@ -615,6 +615,13 @@ const opacity = () => {
     });
 };
 
+const modalFoto = (btn) => {
+    let modal = new bootstrap.Modal('#modalFoto');
+    let img = document.getElementById('showModalFoto');
+    img.src = btn.src;
+    modal.show();
+};
+
 window.addEventListener('load', () => {
     let modal = new bootstrap.Modal('#exampleModal');
     let name = (new URLSearchParams(window.location.search)).get('to') ?? '';