Update index.html

kai9987kai · Nov 18, 2023 · e9b8bdc · e9b8bdc
1 parent 9e5471d
commit e9b8bdc
Showing 1 changed file with 77 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
             cursor: move;
         }
     </style>
+
     <script>
         document.addEventListener('keydown', function(event) {
             // Checking if 'Ctrl' and 'M' are pressed together
@@ -24,6 +25,82 @@
             }
         });
     </script>	   
+
+<style>
+  .image {
+    width: 100px;
+    height: auto;
+  }
+  .popup {
+    display: none;
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0,0.9);
+  }
+  .popup-content {
+    margin: 10% auto;
+    padding: 20px;
+    width: 70%;
+    position: relative;
+  }
+  .close-btn, .zoom-btn {
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+    font-size: 35px;
+    color: #fff;
+  }
+  .zoom-btn {
+    right: 65px;
+  }
+</style>
+</head>
+<body>
+
+<img src="path-to-your-image.jpg" alt="Sample Image">
+
+<div id="popup" class="popup">
+  <div class="popup-content">
+    <span class="close-btn" onclick="closePopup()">&times;</span>
+    <span class="zoom-btn" onclick="zoomImage()">&#128269;</span>
+    <img id="popup-img" src="" alt="Popup Image" style="width:100%">
+  </div>
+</div>
+
+<script>
+  window.onload = function() {
+    var images = document.getElementsByTagName('img');
+    for(var i = 0; i < images.length; i++) {
+      images[i].classList.add('image');
+      images[i].onclick = function(){
+        openPopup(this.src);
+      };
+    }
+  };
+
+  function openPopup(src) {
+    document.getElementById('popup').style.display = 'block';
+    document.getElementById('popup-img').src = src;
+  }
+
+  function closePopup() {
+    document.getElementById('popup').style.display = 'none';
+  }
+
+  function zoomImage() {
+    var img = document.getElementById('popup-img');
+    var isZoomed = img.style.width === '100%';
+    img.style.width = isZoomed ? '200%' : '100%';
+  }
+</script>
+
+
 </head>
 <body>