Merge pull request #44 from Prithwi32/Image-Gallery

Adding Image gallery
apu52 · Jan 15, 2024 · a60d5ba · a60d5ba
2 parents ff3e187 + a14cc13
commit a60d5ba
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 2 deletions.
diff --git a/Image-Gallery/script.js b/Image-Gallery/script.js
@@ -0,0 +1,30 @@
+const imageContainerE1 = document.querySelector(".image-container");
+
+const prevE1 = document.getElementById("prev");
+const nextE1 = document.getElementById("next");
+
+let x = 0;
+let timer;
+prevE1.addEventListener("click", () => {
+  x = x + 45;
+  clearTimeout(timer);
+  updateGallery();
+});
+nextE1.addEventListener("click", () => {
+  x = x - 45;
+  clearTimeout(timer);
+  updateGallery();
+});
+
+function updateGallery() {
+  imageContainerE1.style.transform = `perspective(1000px) rotateY(${x}deg)`;
+
+  timer = setTimeout(() => {
+    x = x - 45;
+    updateGallery();
+  }, 3000);
+}
+
+updateGallery();
+
+
diff --git a/Image-Gallery/style.css b/Image-Gallery/style.css
@@ -0,0 +1,63 @@
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+}
+
+.image-container {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  transform-style: preserve-3d;
+  transform: perspective(1000px) rotateY(0deg);
+  transition: transform 0.7s;
+}
+
+.image-container span {
+  margin: 30px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);
+}
+
+.image-container span img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 220px;
+  height: 250px;
+  object-fit: cover;
+}
+
+.btn-container {
+  margin-top: 300px;
+  position: relative;
+  width: 80%;
+  justify-content: space-between;
+}
+
+.btn {
+  bottom: -80px;
+  background-color: slateblue;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.btn:hover {
+  filter: brightness(1.5);
+}
+
+#prev {
+  left: 0%;
+}
+
+#next {
+  left: 100%;
+}
diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="./Image-Gallery/style.css">
     <title>Arpan Codes | Tourguide</title>
   </head>
   <body>
@@ -147,7 +148,7 @@ <h2 class="section__title">Best trip package</h2>
     </section>
 
     <section class="gallary">
-      <div class="section__container gallary__container">
+      <div class="section__container gallary__container" id="originalDiv">
         <div class="image__gallary">
           <div class="gallary__col">
             <img src="https://i.ibb.co/ZYDJ6vv/pexels-spencer-davis-4356144.jpg" alt="gallary" />
@@ -166,10 +167,49 @@ <h2 class="section__title">
               Explore your suitable and dream places around the world. Here you
               can find your right destination.
             </p>
-            <button class="btn">View All</button>
+            <button class="btn" id="btn-page" onclick="replaceDivs()">View All</button>
           </div>
         </div>
       </div>
+        <!-- New div components (hidden initially) -->
+        <div id="newDiv" style="display: none;">
+          <div class="image-container">
+            <span style="--i : 1">
+                <img src="./img/pexels-ajay-donga-2174656.jpg">
+            </span>
+          <span style="--i : 2">
+                <img src="./img/pexels-alex-azabache-3214958.jpg">
+            </span>
+          <span style="--i : 3">
+                <img src="./img/pexels-andrei-tanase-1271619.jpg">
+            </span>
+          <span style="--i : 4">
+                <img src="./img/pexels-josh-hild-2422259.jpg">
+            </span>
+          <span style="--i : 5">
+                <img src="./img/pexels-paulo-marcelo-martins-2412606.jpg">
+            </span>
+          <span style="--i : 6">
+              <img src="./img/pexels-quang-nguyen-vinh-2132126.jpg">
+            </span>
+            <span style="--i : 7">
+              <img src="./img/pexels-sam-kolder-2387871.jpg">
+            </span>
+              <span style="--i : 8">
+              <img src="./img/pexels-spencer-davis-4356144.jpg">
+            </span>
+              <span style="--i : 9">
+              <img src="./img/pexels-stijn-dijkstra-2499699.jpg">
+            </span>
+              <span style="--i : 10">
+              <img src="./img/pexels-zakaria-boumliha-2827374.jpg">
+            </span>
+            </div>
+            <div class="btn-container">
+                <button class="btn" id="prev">Prev</button>
+                <button class="btn" id="next">Next</button>
+            </div>
+        </div>
     </section>
 
     <section class="subscribe">
@@ -245,4 +285,21 @@ <h4>Address</h4>
       }
     </script>
   </body>
+  <script>
+    function replaceDivs() {
+      // Get references to the original and new divs
+      var originalDiv = document.getElementById("originalDiv");
+      var newDiv = document.getElementById("newDiv");
+
+      // Check if the original div exists
+      if (originalDiv) {
+          // Hide the original div
+          originalDiv.style.display = "none";
+
+          // Show the new div
+          newDiv.style.display = "block";
+      }
+  }
+  </script>
+  <script src="./Image-Gallery/script.js"></script>
 </html>
diff --git a/styles.css b/styles.css
@@ -429,6 +429,7 @@ header {
 }
 
 .footer {
+  width: 100%;
   background-color: var(--text-dark);
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -429,6 +429,7 @@ header { @@
     }
     .footer {
+      width: 100%;
       background-color: var(--text-dark);
     }
@@ Expand Down @@