diff --git a/assets/css/photos.css b/assets/css/photos.css index e87ac87..95c7e34 100644 --- a/assets/css/photos.css +++ b/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; diff --git a/assets/scripts/photosScript.js b/assets/scripts/photosScript.js index 0fc5f6d..c79b13b 100644 --- a/assets/scripts/photosScript.js +++ b/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); +} \ No newline at end of file diff --git a/photos.php b/photos.php index 9c6e5a3..f2ec180 100644 --- a/photos.php +++ b/photos.php @@ -106,8 +106,11 @@ function generatePath($dir)
- - -