Update index.html

kai9987kai · Nov 17, 2023 · dd42e86 · dd42e86
1 parent d347a7b
commit dd42e86
Showing 1 changed file with 90 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -35,6 +35,96 @@
             overflow: auto;
         }
     </style>
+    <style>
+        .lightbox-hidden {
+            display: none;
+        }
+
+        #lightbox {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            border: 1px solid #ccc;
+            background-color: white;
+            padding: 10px;
+            z-index: 1000;
+        }
+
+        #lightbox-img {
+            max-width: 80vw;
+            max-height: 80vh;
+            transition: transform 0.25s ease;
+        }
+
+        .close {
+            cursor: pointer;
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            font-size: 25px;
+            color: black;
+        }
+
+        #zoom-in, #zoom-out {
+            font-size: 16px;
+            padding: 5px 10px;
+            margin: 10px;
+        }
+    </style>
+</head>
+<body>
+
+    <!-- Existing images on the page -->
+    <!-- No need to modify these unless you want to add specific classes or IDs -->
+    <img src="path-to-your-image1.jpg" alt="Image 1">
+    <img src="path-to-your-image2.jpg" alt="Image 2">
+    <!-- More images -->
+
+    <!-- Lightbox Structure -->
+    <div id="lightbox" class="lightbox-hidden">
+        <span id="close" class="close">&times;</span>
+        <img id="lightbox-img" src="">
+        <button id="zoom-in">Zoom In</button>
+        <button id="zoom-out">Zoom Out</button>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const images = document.querySelectorAll('img');
+            const lightbox = document.getElementById('lightbox');
+            const lightboxImg = document.getElementById('lightbox-img');
+            const closeBtn = document.getElementById('close');
+            const zoomInBtn = document.getElementById('zoom-in');
+            const zoomOutBtn = document.getElementById('zoom-out');
+            let zoomLevel = 1;
+
+            images.forEach(img => {
+                img.style.cursor = 'pointer';
+                img.addEventListener('click', function() {
+                    lightboxImg.src = this.src;
+                    lightbox.classList.remove('lightbox-hidden');
+                    zoomLevel = 1;
+                    lightboxImg.style.transform = 'scale(1)';
+                });
+            });
+
+            closeBtn.addEventListener('click', function() {
+                lightbox.classList.add('lightbox-hidden');
+            });
+
+            zoomInBtn.addEventListener('click', function() {
+                zoomLevel += 0.1;
+                lightboxImg.style.transform = 'scale(' + zoomLevel + ')';
+            });
+
+            zoomOutBtn.addEventListener('click', function() {
+                if (zoomLevel > 0.1) {
+                    zoomLevel -= 0.1;
+                    lightboxImg.style.transform = 'scale(' + zoomLevel + ')';
+            });
+        });
+    </script>	
 </head>
 <body>