Add files via upload

Ishika-Gupta06 · Mar 14, 2024 · f3cac98 · f3cac98
1 parent 8cfc292
commit f3cac98
Show file tree

Hide file tree

Showing 12 changed files with 278 additions and 0 deletions.
diff --git a/img_gallery/img/Beautiful_nuthatch_eaglenest.jpg b/img_gallery/img/Beautiful_nuthatch_eaglenest.jpg
diff --git a/img_gallery/img/Forest_wagtail_dandeli.jpg b/img_gallery/img/Forest_wagtail_dandeli.jpg
diff --git a/img_gallery/img/blue.jpg b/img_gallery/img/blue.jpg
diff --git a/img_gallery/img/egle.jpg b/img_gallery/img/egle.jpg
diff --git a/img_gallery/img/fox.jpg b/img_gallery/img/fox.jpg
diff --git a/img_gallery/img/giraffee.jpg b/img_gallery/img/giraffee.jpg
diff --git a/img_gallery/img/lion.jpg b/img_gallery/img/lion.jpg
diff --git a/img_gallery/img/lotus.jpg b/img_gallery/img/lotus.jpg
diff --git a/img_gallery/img/tulip.jpeg b/img_gallery/img/tulip.jpeg
diff --git a/img_gallery/index.html b/img_gallery/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gallery</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Image Gallery</h1>
+
+  <div class="gallery">
+    <!-- Thumbnail Images -->
+    <div class="thumbnail" onclick="openModal('img/lotus.jpg')">
+      <img src="img/lotus.jpg" alt="Thumbnail 1">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/blue.jpg')">
+      <img src="img/blue.jpg" alt="Thumbnail 2">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/tulip.jpeg')">
+      <img src="img/tulip.jpeg" alt="Thumbnail 3">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/blue.jpg')">
+        <img src="img/blue.jpg" alt="Thumbnail 4">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/lotus.jpg')">
+        <img src="img/lotus.jpg" alt="Thumbnail 5">
+    </div>
+    <!-- Add more thumbnails as needed -->
+
+    <!-- Modal for Enlarged Image -->
+    <div class="modal" id="myModal">
+      <span class="close" onclick="closeModal()">&times;</span>
+      <div class="modal-content">
+        <img id="modalImg" alt="Enlarged Image">
+      </div>
+    </div>
+  </div>
+
+  <!-- Second Row of Thumbnail Images -->
+<div class="gallery">
+    <div class="thumbnail" onclick="openModal('img/Beautiful_nuthatch_eaglenest.jpg')">
+      <img src="img/Beautiful_nuthatch_eaglenest.jpg" alt="Thumbnail 6">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/Forest_wagtail_dandeli.jpg')">
+      <img src="img/Forest_wagtail_dandeli.jpg" alt="Thumbnail 7">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/egle.jpg')">
+      <img src="img/egle.jpg" alt="Thumbnail 8">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/Forest_wagtail_dandeli.jpg')">
+      <img src="img/Forest_wagtail_dandeli.jpg" alt="Thumbnail 9">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/Beautiful_nuthatch_eaglenest.jpg')">
+      <img src="img/Beautiful_nuthatch_eaglenest.jpg" alt="Thumbnail 10">
+    </div>
+
+    <!-- Modal for Enlarged Image -->
+    <div class="modal" id="myModal2">
+      <span class="close" onclick="closeModal2()">&times;</span>
+      <div class="modal-content">
+        <img id="modalImg2" alt="Enlarged Image">
+      </div>
+    </div>
+  </div>
+<!-- third Row of Thumbnail Images -->
+  <div class="gallery">
+    <div class="thumbnail" onclick="openModal('img/lion.jpg')">
+      <img src="img/lion.jpg" alt="Thumbnail 6">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/fox.jpg')">
+      <img src="img/fox.jpg" alt="Thumbnail 7">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/giraffee.jpg')">
+      <img src="img/giraffee.jpg" alt="Thumbnail 8">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/lion.jpg')">
+      <img src="img/lion.jpg" alt="Thumbnail 9">
+    </div>
+    <div class="thumbnail" onclick="openModal('img/fox.jpg')">
+      <img src="img/fox.jpg" alt="Thumbnail 10">
+    </div>
+
+    <!-- Modal for Enlarged Image -->
+    <div class="modal" id="myModal2">
+      <span class="close" onclick="closeModal2()">&times;</span>
+      <div class="modal-content">
+        <img id="modalImg2" alt="Enlarged Image">
+      </div>
+    </div>
+  </div>
+
+
+   <!--Slideshow container-->
+  <div class="slideshow-container">
+    <div class="mySlides fade">
+      <img src="img/Beautiful_nuthatch_eaglenest.jpg" alt="Image 1">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/blue.jpg" alt="Image 2">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/egle.jpg" alt="Image 3">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/Forest_wagtail_dandeli.jpg" alt="Image 1">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/lotus.jpg" alt="Image 2">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/tulip.jpeg" alt="Image 3">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/lion.jpg" alt="Image 1">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/fox.jpg" alt="Image 2">
+    </div>
+
+    <div class="mySlides fade">
+      <img src="img/giraffee.jpg" alt="Image 3">
+    </div>
+  </div>
+
+<script src="script.js"></script>   
+</body>
+</html>
diff --git a/img_gallery/script.js b/img_gallery/script.js
@@ -0,0 +1,41 @@
+function openModal(imageSrc) {
+    document.getElementById('myModal').style.display = 'flex';
+    document.getElementById('modalImg').src = imageSrc;
+  }
+
+  function closeModal() {
+    document.getElementById('myModal').style.display = 'none';
+  }
+
+  function openModal2(imageSrc) {
+    document.getElementById('myModal2').style.display = 'flex';
+    document.getElementById('modalImg2').src = imageSrc;
+  }
+
+  function closeModal2() {
+    document.getElementById('myModal2').style.display = 'none';
+  }
+
+//for slideshow
+
+let slideIndex = 0;
+
+function showSlides() {
+  let i;
+  const slides = document.getElementsByClassName("mySlides");
+
+  for (i = 0; i < slides.length; i++) {
+    slides[i].style.display = "none";
+  }
+
+  slideIndex++;
+
+  if (slideIndex > slides.length) {
+    slideIndex = 1;
+  }
+
+  slides[slideIndex - 1].style.display = "block";
+  setTimeout(showSlides, 1500); 
+}
+
+showSlides();
diff --git a/img_gallery/styles.css b/img_gallery/styles.css
@@ -0,0 +1,102 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'poppins', sans-serif;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+  }
+
+  h1 {
+    text-align: center;
+    padding: 20px;
+    background-color: #333;
+    color: #fff;
+    margin: 0;
+  }
+
+  .gallery {
+    display: flex;
+    height: 90%;
+    align-items: center;;
+    justify-content: center;
+  }
+
+  .thumbnail {
+    margin: 10px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.2s;
+  }
+
+  .thumbnail:hover {
+    transform: scale(1.1);
+  }
+
+  .thumbnail img {
+    width: 100%;
+    height: auto;
+  }
+
+  .modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+  }
+
+  .modal-content {
+    max-width: 80%;
+    max-height: 80%;
+  }
+
+  .modal img {
+    width: 100%;
+    height: auto;
+  }
+
+  .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+    color: #fff;
+    font-size: 24px;
+
+  }
+
+  .slideshow-container {
+    max-width: 90%;
+    position: relative;
+    margin: 0 auto; 
+    margin-left: 12px; 
+  }
+
+  .mySlides {
+    display: none;
+    width: 60%; 
+    max-height: 60vh;
+  }
+
+  .fade {
+    animation: fade 3s ease-in-out infinite;
+  }
+
+  @keyframes fade {
+    0%, 100% {
+      opacity: 0;
+    }
+    20%, 80% {
+      opacity: 1;
+    }
+  }