Added download button on invividual images

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;

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);
 }

index.php

@@ -9,6 +9,7 @@
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/sidenav.css">
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/hamburger.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
     <link rel="shortcut icon" href="favicon.ico">
 </head>

photos.php

@@ -89,6 +89,9 @@ function generatePath($dir)
         <i id="left" class="fas fa-arrow-left" onclick="displayNext(-1)"></i>
         <div id="photo_control">
             <i id="close" class="fas fa-times" onclick="closeBig()"></i>
+            <a id="img_big_download" download="" href="">
+                <i id="download" class="fas fa-download"></i>
+            </a>
             <a href="" id="img_big_link">
                 <i id="fullscreen" class="fas fa-expand-arrows-alt" ></i>
             </a>
@@ -112,6 +115,10 @@ function generatePath($dir)
     getDirectories(getActiveFolder());
     ?>
 </div>
+<div id="download_album">
+    <i class="fas fa-download"></i>
+    <p>Télécharger l'album</p>
+</div>
 <div class="photos">
     <?php
     getPhotos(getActiveFolder());