Added loading image icons

assets/css/photos.css

@@ -97,7 +97,6 @@
     height: 25px;
     transition: 0.3s;
     cursor: pointer;
-    z-index: 7;
 }
 
 #right {
@@ -158,6 +157,27 @@
     width: 40px;
 }
 
+#loading {
+    color: white;
+    width: 100%;
+    height: 100%;
+    z-index: 8;
+    position: absolute;
+    background: #1c1c1ccc;
+    text-align: center;
+    display: block;
+}
+
+#loading svg{
+    position: relative;
+    width: 25px;
+    height: 25px;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
 #photo_control {
     position: fixed;
     bottom: 0;

assets/scripts/photosScript.js

@@ -5,7 +5,7 @@ var showcaseDownload = $("#img_big_download");
 var photoOverlay = $("#photo_overlay");
 var headerTop = $("#header_top");
 var sideNav = $("#menuSidenav");
-
+var loading = $("#loading");
 
 /*
  * Display selected image in showcase
@@ -134,8 +134,21 @@ function displayNext(direction) {
  * Change image source, link and download
  */
 function changeImage(thumb) {
+    displayLoading();
+    showcase.on('load', function() {
+        hideLoading();
+    });
     var source = getSourceFromThumbnail(thumb);
     showcase.attr("src", source);
     showcaseLink.attr("href", source);
     showcaseDownload.attr("href", source);
 }
+
+
+function displayLoading() {
+    loading.show();
+}
+
+function hideLoading() {
+    loading.fadeOut(200);
+}

photos.php

@@ -106,8 +106,11 @@ function generatePath($dir)
 <div id="photo_overlay" style="display:none">
 
     <img src="" id="img_big" onclick="toggleFullscreen()">
-
     <div id="close_back" onclick="closeBig()"></div>
+    <div id="loading" onclick="closeBig()">
+        <i class="fas fa-spinner fa-spin"></i>
+    </div>
+
     <div id="photo_buttons">
         <i id="right" class="fas fa-arrow-right" onclick="displayNext(1)"></i>
         <i id="left" class="fas fa-arrow-left" onclick="displayNext(-1)"></i>
@@ -121,9 +124,6 @@ function generatePath($dir)
             </a>
         </div>
     </div>
-
-
-
 </div>
 
 <h1>Photos</h1>