diff --git a/assets/css/photos.css b/assets/css/photos.css index c089bf9..734b0ad 100644 --- a/assets/css/photos.css +++ b/assets/css/photos.css @@ -4,7 +4,7 @@ border-radius: 5px; } -.photos_folder a:hover, .photos_path a:hover { +.photos_folder a:hover, .photos_path a:hover, #download_album:hover { box-shadow: 0 0 10px #000; background-color: #e0e0e0; color: black; @@ -89,7 +89,7 @@ transform: translate(-50%, -50%); } -#close, #right, #left, #fullscreen { +#close, #right, #left, #fullscreen, #download { color: white; width: 25px; height: 25px; @@ -123,6 +123,14 @@ bottom: 0; } +#download { + color: #28ca2a; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0; +} + #fullscreen { color: #2377c6; position: absolute; @@ -138,12 +146,12 @@ width: 40px; } -#close:hover, #fullscreen:hover { +#close:hover, #fullscreen:hover, #download:hover { height: 50px; width: 50px; } -#close:active, #fullscreen:active { +#close:active, #fullscreen:active, #download:active { height: 40px; width: 40px; } @@ -155,7 +163,7 @@ transform: translateX(50%); background: #1c1c1c; height: 25px; - width: 75px; + width: 125px; border-radius: 5px; transition: 0.3s; } @@ -190,6 +198,30 @@ z-index: 5; } +#download_album { + height: 50px; + width: 200px; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: #1a1a1a; + box-shadow: 0 0 4px #000; + transition: 0.3s; + color: #28ca2a; + cursor: pointer; + margin: 5px; +} + +#download_album p { + margin: 0; +} + +#download_album svg { + width: 24px; + height: 24px; + margin-right: 5px; +} + @media screen and (max-width: 480px) { .photos_folder a { font-size: 15px; diff --git a/assets/scripts/photosScript.js b/assets/scripts/photosScript.js index 510bf54..20f631c 100644 --- a/assets/scripts/photosScript.js +++ b/assets/scripts/photosScript.js @@ -1,6 +1,7 @@ var showcase = $("#img_big"); var showcaseButton = $("#photo_buttons"); var showcaseLink = $("#img_big_link"); +var showcaseDownload = $("#img_big_download"); var photoOverlay = $("#photo_overlay"); var headerTop = $("#header_top"); var sideNav = $("#menuSidenav"); @@ -12,6 +13,7 @@ var sideNav = $("#menuSidenav"); */ function displayBig(elem) { changeImage($(elem).attr('src')); + hideTopBar(); disableFullscreen(); photoOverlay.fadeIn(500); } @@ -20,6 +22,7 @@ function displayBig(elem) { * Hide showcase image */ function closeBig() { + showTopBar(); disableFullscreen(); photoOverlay.fadeOut(500); } @@ -36,16 +39,24 @@ function toggleFullscreen() { function enableFullscreen() { showcaseButton.fadeOut(500); - headerTop.fadeOut(500); - sideNav.fadeOut(500); } function disableFullscreen() { showcaseButton.fadeIn(500); +} + +function hideTopBar() { + headerTop.fadeOut(500); + sideNav.fadeOut(500); +} + +function showTopBar() { headerTop.fadeIn(500); sideNav.fadeIn(500); } + + /* * Control images with keyboard arrows */ @@ -116,9 +127,10 @@ function displayNext(direction) { } /* - * Change image source and link + * Change image source, link and download */ function changeImage(src) { showcase.attr("src", src); showcaseLink.attr("href", src); + showcaseDownload.attr("href", src); } diff --git a/index.php b/index.php index 974b283..5b19f2a 100644 --- a/index.php +++ b/index.php @@ -9,6 +9,7 @@ + diff --git a/photos.php b/photos.php index b48a6f0..581ed9d 100644 --- a/photos.php +++ b/photos.php @@ -89,6 +89,9 @@ function generatePath($dir)
Télécharger l'album
+