forked from rebillar/site-accueil-insa
Added download button on invividual images
This commit is contained in:
Keplyx
parent
b123742588
commit
faa40833c0
4 changed files with 60 additions and 8 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
Loading…
Reference in a new issue