diff --git a/index.html b/index.html index a53564d..0f7f16f 100644 --- 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; + } @@ -66,7 +97,13 @@
- + + + diff --git a/portfolio.html b/portfolio.html deleted file mode 100644 index a53564d..0000000 --- a/portfolio.html +++ /dev/null @@ -1,72 +0,0 @@ - - - - - - - - -
-
-
- -
-
- - -
-
- -
-
-
- - - diff --git a/script.js b/script.js index f221a38..1e5137f 100644 --- 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');