add modal

conorsim · Dec 16, 2023 · 96e64c1 · 96e64c1
1 parent 6b73e24
commit 96e64c1
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 73 deletions.
diff --git a/index.html b/index.html
@@ -47,6 +47,37 @@
     .image-wrapper:hover .image-tooltip {
         display: block;
     }
+
+    /* Style for the modal */
+    .modal {
+        display: none;
+        position: fixed;
+        z-index: 1;
+        padding-top: 100px;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        background-color: rgba(0,0,0,0.9);
+    }
+
+    .modal-content {
+        margin: auto;
+        display: block;
+        width: 80%;
+        max-width: 700px;
+    }
+
+    .close {
+        position: absolute;
+        top: 15px;
+        right: 35px;
+        color: #f1f1f1;
+        font-size: 40px;
+        font-weight: bold;
+        cursor: pointer;
+    }
 
   </style>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
@@ -66,7 +97,13 @@
 
   <div class="column">
   </div>
-</div> 
+</div>
+
+<div id="myModal" class="modal">
+  <span class="close">&times;</span>
+  <img class="modal-content" id="modalImage">
+  <div id="caption"></div>
+</div>
 
 </body>
 </html>
diff --git a/portfolio.html b/portfolio.html
diff --git a/script.js b/script.js
@@ -10,6 +10,38 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
+    // let gallery = document.getElementById('imageGallery');
+    // images.forEach(src => {
+    //     let img = document.createElement('img');
+    //     img.src = src;
+    //     img.addEventListener('click', function() {
+    //         openModal(src);
+    //     });
+    //     gallery.appendChild(img);
+    // });
+
+    function openModal(src) {
+        let modal = document.getElementById('myModal');
+        let modalImage = document.getElementById('modalImage');
+        modal.style.display = "block";
+        modalImage.src = src;
+    }
+
+    // Close the modal
+    let closeBtn = document.getElementsByClassName('close')[0];
+    closeBtn.onclick = function() {
+        let modal = document.getElementById('myModal');
+        modal.style.display = "none";
+    }
+
+    // Close the modal when clicking outside the image
+    window.onclick = function(event) {
+        let modal = document.getElementById('myModal');
+        if (event.target === modal) {
+            modal.style.display = "none";
+        }
+    }
+
     // Process and display the data
     function processData(data) {
         // Sort data by year, placing "N/A" at the end
@@ -30,6 +62,9 @@ document.addEventListener('DOMContentLoaded', function() {
 
             let img = document.createElement('img');
             img.src = `media/${row[0]}.jpg`; // Constructing the path using template literal
+            img.addEventListener('click', function() {
+                openModal(`media/${row[0]}.jpg`);
+            });
             imageWrapper.appendChild(img);
 
             let tooltip = document.createElement('div');