gif

kabrownie · Dec 25, 2024 · 21fc086 · 21fc086
1 parent 861211d
commit 21fc086
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 30 deletions.
diff --git a/css/style.css b/css/style.css
@@ -222,20 +222,40 @@ fieldset {
 
 
 /* Preloader */
-
 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
-    background: #312f2f;
+    background-color: rgb(0, 0, 0); /* Dark overlay background */
     z-index: 999;
-    -webkit-transition: all .5s ease;
-    -moz-transition: all .5s ease;
-    transition: all .5s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    -webkit-transition: all 0.5s ease;
+    -moz-transition: all 0.5s ease;
+    transition: all 0.5s ease;
+}
+
+#loaderGif {
+    width: 80%; /* Adjust the size of the GIF */
+    height: auto;
+}
+
+#loadingText {
+    color: #fff;
+    font-size: 1.5em;
+    font-family: Arial, sans-serif;
+    margin-top: 20px; /* Space below the GIF */
+    text-align: center;
 }
 
+
+/*  */
+
+
 body.loaded #preloader{
     opacity: 0;
     visibility: hidden;

diff --git a/index.html b/index.html
@@ -38,9 +38,14 @@
   <body>
     	 <header>
 	<!-- Preloader Start -->
-    <div id="preloader">
-	  <div class="loader"></div>
-    </div>
+
+
+      <div id="preloader">
+        <img id="loaderGif" src="../renders/sinisaaamoja-ezgif.gif" alt="Loading...">
+        <div id="loadingText">Loading, please wait...</div>
+      </div>
+
+
     <!-- Preloader End -->   
 
     <!-- Home & Menu Section Start -->

diff --git a/js/main.js b/js/main.js
@@ -1,22 +0,0 @@
-
-
-// Function to show image in overlay
-function showImageInOverlay(url) {
-  const overlay = document.getElementById('imageOverlay');
-  const overlayImage = document.getElementById('overlayImage');
-  overlayImage.src = url;  // Set the clicked image in the overlay
-  overlay.style.display = 'flex';  // Show the overlay
-}
-
-// Close the overlay when 'x' button is clicked
-const closeOverlay = document.getElementById("closeOverlay");
-closeOverlay.addEventListener("click", function() {
-  document.getElementById("imageOverlay").style.display = "none";
-});
-
-// Optionally, close the overlay if the user clicks outside the image
-const overlay = document.getElementById("imageOverlay");
-overlay.addEventListener("click", function() {
-  document.getElementById("imageOverlay").style.display="none";
-
-}); 

diff --git a/js/scripts.js b/js/scripts.js
@@ -26,6 +26,26 @@
       event.preventDefault(); // Disable right-click for images
     }
   });
+  // Function to show image in overlay
+function showImageInOverlay(url) {
+  const overlay = document.getElementById('imageOverlay');
+  const overlayImage = document.getElementById('overlayImage');
+  overlayImage.src = url;  // Set the clicked image in the overlay
+  overlay.style.display = 'flex';  // Show the overlay
+}
+
+// Close the overlay when 'x' button is clicked
+const closeOverlay = document.getElementById("closeOverlay");
+closeOverlay.addEventListener("click", function() {
+  document.getElementById("imageOverlay").style.display = "none";
+});
+
+// Optionally, close the overlay if the user clicks outside the image
+const overlay = document.getElementById("imageOverlay");
+overlay.addEventListener("click", function() {
+  document.getElementById("imageOverlay").style.display="none";
+
+}); 
 
 
 // modalend
@@ -142,6 +162,8 @@ $(document).ready(function(){
         });
 
 
+
+
 
 
         /* Portfolio Filtering */

diff --git a/renders/sinisaaamoja-ezgif.gif b/renders/sinisaaamoja-ezgif.gif