modal slode show prevew project

Author: romadebrian

index.html

@@ -73,9 +73,13 @@
         class="rounded-circle img-thumbnail"
       />
       <h1 class="display-4">Roma Debrian</h1>
-      <p class="lead">
+      <!-- <p class="lead">
         Web Developer <br />
         Lulusan Universitas Pradita Jurusan Teknik Informatika
+      </p> -->
+      <p class="lead">
+        Web Developer <br />
+        Selamat datang di portofolio saya
       </p>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
         <path
@@ -130,9 +134,11 @@ <h2>Projects</h2>
           <div class="col-md-4 mb-3">
             <div class="card">
               <img
+                id="myImg"
                 src="resource/Project/Project6.png"
                 class="card-img-top"
-                alt="Project 1"
+                alt="WEBJamuindo"
+                onclick="BukaModal('WEBJamuindo')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -152,8 +158,9 @@ <h5 class="card-title">
             <div class="card">
               <img
                 src="resource/Project/Project1.png"
-                class="card-img-top"
-                alt="Project 1"
+                class="card-img-top cmyImg"
+                alt="WEBSekolah"
+                onclick="BukaModal('WEBSekolah')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -172,8 +179,9 @@ <h5 class="card-title">
             <div class="card">
               <img
                 src="resource/Project/Project2.png"
-                class="card-img-top"
-                alt="Project 1"
+                class="card-img-top cmyImg"
+                alt="AnimeList"
+                onclick="BukaModal('AnimeList')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -192,8 +200,9 @@ <h5 class="card-title">
             <div class="card">
               <img
                 src="resource/Project/Project3.png"
-                class="card-img-top"
-                alt="Project 1"
+                class="card-img-top cmyImg"
+                alt="PenggajianKaryawan"
+                onclick="BukaModal('PenggajianKaryawan')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -213,8 +222,9 @@ <h5 class="card-title">
             <div class="card">
               <img
                 src="resource/Project/Project4.jpg"
-                class="card-img-top"
-                alt="Project 1"
+                class="card-img-top cmyImg"
+                alt="ResepMakanan"
+                onclick="BukaModal('ResepMakanan')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -236,8 +246,9 @@ <h5 class="card-title">
             <div class="card">
               <img
                 src="resource/Project/Project5.jpg"
-                class="card-img-top"
-                alt="Project 1"
+                class="card-img-top cmyImg"
+                alt="AkademikMobile"
+                onclick="BukaModal('AkademikMobile')"
               />
               <div class="card-body">
                 <h5 class="card-title">
@@ -257,6 +268,65 @@ <h5 class="card-title">
         </div>
       </div>
     </section>
+
+    <!-- The Modal -->
+    <div id="myModal" class="modal">
+      <!-- The Close Button -->
+      <span class="close" onclick="closemodal()" style="margin-top: 10px"
+        >&times;</span
+      >
+
+      <!-- Modal Content (The Image) -->
+      <!-- <img class="modal-content" id="img01" /> -->
+      <div class="modal-dialog-centered">
+        <div class="modal-content">
+          <div
+            id="carouselExampleControls"
+            class="carousel slide"
+            data-bs-ride="carousel"
+          >
+            <div class="carousel-inner">
+              <div class="carousel-item active">
+                <img id="img01" class="d-block w-100" alt="imgProject" />
+              </div>
+              <div class="carousel-item">
+                <img id="img02" class="d-block w-100" alt="imgProject" />
+              </div>
+              <div class="carousel-item">
+                <img id="img03" class="d-block w-100" alt="imgProject" />
+              </div>
+            </div>
+            <button
+              class="carousel-control-prev"
+              type="button"
+              data-bs-target="#carouselExampleControls"
+              data-bs-slide="prev"
+            >
+              <span
+                class="carousel-control-prev-icon"
+                aria-hidden="true"
+              ></span>
+              <span class="visually-hidden">Previous</span>
+            </button>
+            <button
+              class="carousel-control-next"
+              type="button"
+              data-bs-target="#carouselExampleControls"
+              data-bs-slide="next"
+            >
+              <span
+                class="carousel-control-next-icon"
+                aria-hidden="true"
+              ></span>
+              <span class="visually-hidden">Next</span>
+            </button>
+          </div>
+
+          <!-- Modal Caption (Image Text) -->
+          <!-- <div id="caption"></div> -->
+        </div>
+      </div>
+    </div>
     <!-- End of Project -->
 
     <!-- Contact -->
@@ -281,6 +351,14 @@ <h2>Kontak</h2>
                 ></span
               >
             </div>
+            <div class="mb-3">
+              <i class="bi bi-twitter"></i>
+              <span class="text-secondary"
+                ><a href="https://www.instagram.com/roma_debrian/"
+                  >Instagram</a
+                ></span
+              >
+            </div>
             <div class="mb-3">
               <i class="bi bi-twitter"></i>
               <span class="text-secondary"
@@ -319,7 +397,51 @@ <h2>Kontak</h2>
     </footer>
     <!-- End of Footer -->
 
-    <!-- Javascrip -->
+    <!-- Javascript -->
+    <script>
+      // Get the modal
+      var modal = document.getElementById("myModal");
+
+      // Get the image and insert it inside the modal - use its "alt" text as a caption
+      var img = document.getElementById("myImg");
+      var modalImg1 = document.getElementById("img01");
+      var modalImg2 = document.getElementById("img02");
+      var modalImg3 = document.getElementById("img03");
+      var captionText = document.getElementById("caption");
+
+      // img.onclick = function () {
+      //   var folder = this.alt;
+      //   alert(folder);
+      //   modal.style.display = "block";
+      //   modalImg1.src = "resource/Project/" + folder + "/1.png";
+      //   modalImg2.src = "resource/Project/" + folder + "/2.png";
+      //   modalImg3.src = "resource/Project/" + folder + "/3.png";
+      //   captionText.innerHTML = this.alt;
+      // };
+
+      // Get the <span> element that closes the modal
+      var span = document.getElementsByClassName("close")[0];
+
+      // When the user clicks on <span> (x), close the modal
+      // span.onclick = function () {
+      //   modal.style.display = "none";
+      // };
+
+      function closemodal() {
+        modal.style.display = "none";
+      }
+
+      function dontclosemodal() {}
+
+      function BukaModal(folder) {
+        // alert(folder);
+        modal.style.display = "block";
+        modalImg1.src = "resource/Project/" + folder + "/1.png";
+        modalImg2.src = "resource/Project/" + folder + "/2.png";
+        modalImg3.src = "resource/Project/" + folder + "/3.png";
+      }
+    </script>
+
     <script
       src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"