forked from vergnet/site-accueil-insa
Improved image player
This commit is contained in:
keplyx
parent
e0fa27c7fa
commit
fe543943a8
5 changed files with 199 additions and 213 deletions
|
|
@ -1,10 +1,14 @@
|
|||
#photo-container {
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.photos-folder {
|
||||
width: 100%;
|
||||
border: 1px solid #5a5a5a;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.photos-folder a:hover, .photos-path a:hover, #download-album:hover {
|
||||
.photos-folder a:hover, .photos-path a:hover, #downloadAlbum:hover {
|
||||
box-shadow: 0 0 10px #000;
|
||||
background-color: #635247;
|
||||
}
|
||||
|
|
@ -25,7 +29,7 @@
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#folder-title {
|
||||
#folderTitle {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
color: #73b795;
|
||||
|
|
@ -33,40 +37,39 @@
|
|||
text-shadow: 0 0 5px #1c1c1c;
|
||||
}
|
||||
|
||||
#folder-photos, #folder-albums {
|
||||
#folderPhotos, #folderAlbums {
|
||||
color: #808080;
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 5px #1c1c1c;
|
||||
}
|
||||
|
||||
#folder-photos {
|
||||
#folderPhotos {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
||||
#folder-albums {
|
||||
#folderAlbums {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.photos img {
|
||||
display: inline-flex;
|
||||
/* 4/3 format */
|
||||
width: 140px;
|
||||
height: 105px;
|
||||
width: 200px;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
padding: 0;
|
||||
margin: 10px 2px 0 2px;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.photos img:hover {
|
||||
box-shadow: 0 0 5px #000;
|
||||
-webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */
|
||||
filter: blur(1px);
|
||||
opacity: 0.7;
|
||||
border-radius: 20px;
|
||||
opacity: 0.5;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.photos img:active {
|
||||
|
|
@ -96,7 +99,7 @@
|
|||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
#img-big {
|
||||
#imgBig {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
|
|
@ -109,111 +112,7 @@
|
|||
box-shadow: 0 0 5px #000;
|
||||
}
|
||||
|
||||
#close, #right, #left, #fullscreen, #download {
|
||||
color: white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#right {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(to left, #1c1c1c, transparent 90%);
|
||||
}
|
||||
|
||||
#left {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(to right, #1c1c1c, transparent 90%);
|
||||
}
|
||||
|
||||
#close {
|
||||
color: #ca0600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#download {
|
||||
color: #28ca2a;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#fullscreen {
|
||||
color: #2377c6;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#right:hover, #left:hover {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#right:active, #left:active {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#close:hover, #fullscreen:hover, #download:hover {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
#close:active, #fullscreen:active, #download:active {
|
||||
height: 40px;
|
||||
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;
|
||||
right: 50%;
|
||||
-webkit-transform: translateX(50%);
|
||||
transform: translateX(50%);
|
||||
background: #1c1c1c;
|
||||
height: 25px;
|
||||
width: 125px;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#photo-control:hover {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#photo-buttons {
|
||||
#photoButtonsContainer {
|
||||
position: fixed;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
|
|
@ -223,23 +122,92 @@
|
|||
-ms-user-select: none; /* IE 10+ */
|
||||
}
|
||||
|
||||
#close-back {
|
||||
#rightButton, #leftButton {
|
||||
transition: 0.2s;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 10%;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
font-size: 5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#rightButton {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#leftButton {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#closeButton, #downloadButton {
|
||||
transition: 0.2s;
|
||||
position: fixed;
|
||||
color: white;
|
||||
display: flex;
|
||||
font-size: 3rem;
|
||||
top: 0;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
right: 10%;
|
||||
}
|
||||
|
||||
#downloadButton {
|
||||
right: calc(10% + 80px);
|
||||
}
|
||||
|
||||
#rightButton:hover, #leftButton:hover, #closeButton:hover, #downloadButton:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
#rightButton i, #leftButton i, #closeButton i, #downloadButton i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#rightButton:active, #leftButton:active, #closeButton:active, #downloadButton:active {
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
|
||||
#loadingIconContainer {
|
||||
color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
font-size: 5rem;
|
||||
}
|
||||
|
||||
#loadingIconContainer i {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
#closeBack {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
#photo-overlay {
|
||||
#photoOverlay {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #212121aa;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#download-album {
|
||||
#downloadAlbum {
|
||||
height: 70px;
|
||||
width: 200px;
|
||||
display: inline-flex;
|
||||
|
|
@ -255,31 +223,50 @@
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
#download-text {
|
||||
#downloadText {
|
||||
margin-top: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#album-photo-count {
|
||||
#albumPhotoCount {
|
||||
color: #929ba8;
|
||||
margin-bottom: 5px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#download-text svg {
|
||||
#downloadText svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
#rightButton, #leftButton {
|
||||
width: 80px;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
right: 50%;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
#downloadButton {
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
.photos-folder a {
|
||||
min-width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
#folder-title {
|
||||
#folderTitle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
color: #73b795;
|
||||
|
|
@ -287,18 +274,23 @@
|
|||
text-shadow: 0 0 5px #1c1c1c;
|
||||
}
|
||||
|
||||
#folder-photos, #folder-albums {
|
||||
#folderPhotos, #folderAlbums {
|
||||
color: #808080;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
#folder-photos {
|
||||
#folderPhotos {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
#folder-albums {
|
||||
#folderAlbums {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.photos img {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,17 @@
|
|||
let showcase = $("#img-big");
|
||||
let showcaseButton = $("#photo-buttons");
|
||||
let showcaseLink = $("#img_big_link");
|
||||
let showcaseDownload = $("#img_big_download");
|
||||
let photoOverlay = $("#photo-overlay");
|
||||
let showcase = $("#imgBig");
|
||||
let showcaseButtonContainer = $("#photoButtonsContainer");
|
||||
let showcaseDownload = $("#downloadButton");
|
||||
let photoOverlay = $("#photoOverlay");
|
||||
let headerTop = $("#header-top");
|
||||
let sideNav = $("#menuSidenav");
|
||||
let loading = $("#loading");
|
||||
var move_photo = false;
|
||||
var grab_offsetX = 0;
|
||||
var grab_offsetY = 0;
|
||||
let loading = $("#loadingIconContainer");
|
||||
let move_photo = false;
|
||||
let grab_offsetX = 0;
|
||||
let grab_offsetY = 0;
|
||||
|
||||
var idle_time = 0;
|
||||
var scaling = false;
|
||||
var isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
|
||||
var isMouseOverButtons = false;
|
||||
let idle_time = 0;
|
||||
let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
|
||||
let isMouseOverButtons = false;
|
||||
|
||||
$(document).ready(
|
||||
function () {
|
||||
|
|
@ -57,7 +55,7 @@ $(document).ready(
|
|||
}
|
||||
return false;
|
||||
});
|
||||
document.getElementById("photos_title").scrollIntoView();
|
||||
document.getElementById("photosTitle").scrollIntoView();
|
||||
showcase.on('dragstart', function(event) { event.preventDefault(); }); // Stop image drag out of page
|
||||
if (!isMobile)
|
||||
setInterval(timerIncrement, 100);
|
||||
|
|
@ -66,13 +64,12 @@ $(document).ready(
|
|||
|
||||
$(document).mousemove(function (event) {
|
||||
let cursorY = event.pageY - $(window).scrollTop();
|
||||
var elem = document.elementFromPoint(event.pageX, cursorY);
|
||||
isMouseOverButtons = !(elem.id === "close-back" || elem.id === "img-big"); // Prevent entering fullscreen when cursor on control buttons
|
||||
let elem = document.elementFromPoint(event.pageX, cursorY);
|
||||
isMouseOverButtons = !(elem.id === "closeBack" || elem.id === "loadingIconContainer" || elem.id === showcase.attr('id')); // Prevent entering fullscreen when cursor on control buttons
|
||||
idle_time = 0;
|
||||
});
|
||||
|
||||
showcase.mousemove(function(event){
|
||||
|
||||
if (showcase.height() > $(window).height() || showcase.width() > $(window).width) {
|
||||
showcase.css('cursor', 'move');
|
||||
if (move_photo){
|
||||
|
|
@ -116,16 +113,22 @@ showcase.mouseleave(function(){
|
|||
* When clicked, display image in full size
|
||||
*/
|
||||
function displayBig(elem) {
|
||||
isMouseOverButtons = false; // Allow fullscreen when clicking on an image without mouving the mouse
|
||||
changeImage($(elem).attr('src'));
|
||||
hideTopBar();
|
||||
disableFullscreen();
|
||||
photoOverlay.fadeIn(500);
|
||||
$('body').css('overflow', 'hidden');
|
||||
}
|
||||
|
||||
function getSourceFromThumbnail(source) {
|
||||
return source.replace("photos_thumb/", "photos/");
|
||||
}
|
||||
|
||||
function getThumbnailFromSource(source) {
|
||||
return source.replace("photos/", "photos_thumb/");
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide showcase image
|
||||
*/
|
||||
|
|
@ -133,18 +136,30 @@ function closeBig() {
|
|||
showTopBar();
|
||||
disableFullscreen();
|
||||
photoOverlay.fadeOut(500);
|
||||
$('body').css('overflow', 'auto');
|
||||
scrollToShowcaseImage();
|
||||
}
|
||||
|
||||
|
||||
function scrollToShowcaseImage() {
|
||||
let source = showcase.attr('src');
|
||||
let image = $("img[src$='" + getThumbnailFromSource(source) + "']");
|
||||
if (image !== undefined) {
|
||||
image.get(0).scrollIntoView();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function enableFullscreen() {
|
||||
showcaseButton.fadeOut(500);
|
||||
showcaseButtonContainer.fadeOut(500);
|
||||
}
|
||||
|
||||
function disableFullscreen() {
|
||||
showcaseButton.fadeIn(500);
|
||||
showcaseButtonContainer.fadeIn(500);
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
if (is_fullscreen())
|
||||
if (isFullscreen())
|
||||
disableFullscreen();
|
||||
else
|
||||
enableFullscreen();
|
||||
|
|
@ -160,8 +175,8 @@ function showTopBar() {
|
|||
sideNav.fadeIn(500);
|
||||
}
|
||||
|
||||
function is_fullscreen(){
|
||||
return showcaseButton.css("display") === "none";
|
||||
function isFullscreen(){
|
||||
return showcaseButtonContainer.css("display") === "none";
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -170,9 +185,9 @@ function timerIncrement() {
|
|||
idle_time = 0;
|
||||
else
|
||||
idle_time = idle_time+ 1;
|
||||
if (idle_time > 10 && !is_fullscreen()) { // 1 second
|
||||
if (idle_time > 10 && !isFullscreen()) { // 1 second
|
||||
enableFullscreen();
|
||||
} else if (idle_time <= 10 && is_fullscreen()){
|
||||
} else if (idle_time <= 10 && isFullscreen()){
|
||||
disableFullscreen();
|
||||
}
|
||||
}
|
||||
|
|
@ -188,7 +203,7 @@ $(document).keydown(function (e) {
|
|||
case 39: // right
|
||||
displayNext(1);
|
||||
break;
|
||||
case 27:
|
||||
case 27: // escape
|
||||
closeBig();
|
||||
break;
|
||||
default:
|
||||
|
|
@ -197,45 +212,21 @@ $(document).keydown(function (e) {
|
|||
e.preventDefault(); // prevent the default action (scroll / move caret)
|
||||
});
|
||||
|
||||
/*
|
||||
* Control images with swipes
|
||||
*/
|
||||
|
||||
var img = document.querySelector('#img-big');
|
||||
// Create a manager to manager the element
|
||||
var manager = new Hammer.Manager(img, {touchAction: "auto"}); // enable the touch action to allow scrolling on the sidenav
|
||||
// Create a recognizer
|
||||
var Swipe = new Hammer.Swipe();
|
||||
// Add the recognizer to the manager
|
||||
manager.add(Swipe);
|
||||
|
||||
// Subscribe to the swipe event
|
||||
manager.on('swipe', function(e) {
|
||||
var direction = e.offsetDirection;
|
||||
if (isMobile){
|
||||
if (direction === 4) { // right
|
||||
displayNext(-1);
|
||||
} else if (direction === 2) { // left
|
||||
displayNext(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
* Display next/last image in showcase. When reaching end/start, loop back to start/end
|
||||
*/
|
||||
function displayNext(direction) {
|
||||
var currentSrc = showcase.attr('src');
|
||||
var photos = document.getElementsByClassName("photo");
|
||||
var current = 0;
|
||||
for (var i = 0; i < photos.length; i++) {
|
||||
let currentSrc = showcase.attr('src');
|
||||
let photos = document.getElementsByClassName("photo");
|
||||
let current = 0;
|
||||
for (let i = 0; i < photos.length; i++) {
|
||||
if (getSourceFromThumbnail($(photos[i]).attr('src')) === currentSrc) {
|
||||
current = i;
|
||||
}
|
||||
}
|
||||
var next = current + direction;
|
||||
var nextId = "";
|
||||
let next = current + direction;
|
||||
let nextId = "";
|
||||
if (direction > 0) {
|
||||
nextId = "#photo-0";
|
||||
} else {
|
||||
|
|
@ -244,7 +235,7 @@ function displayNext(direction) {
|
|||
if (document.getElementById("photo-" + next) != null) {
|
||||
nextId = "#photo-" + next;
|
||||
}
|
||||
var nextSrc = $(nextId).attr('src');
|
||||
let nextSrc = $(nextId).attr('src');
|
||||
changeImage(nextSrc);
|
||||
}
|
||||
|
||||
|
|
@ -258,12 +249,12 @@ function changeImage(thumb) {
|
|||
hideLoading();
|
||||
showcase.css('display', 'block');
|
||||
if ($(showcase).width() > $(window).width()){ // prevent display problems on portait devices
|
||||
var scale = $(window).width() * 0.9 / $(showcase).width();
|
||||
let scale = $(window).width() * 0.9 / $(showcase).width();
|
||||
$(showcase).width(scale*$(showcase).width());
|
||||
$(showcase).height(scale*$(showcase).height());
|
||||
}
|
||||
});
|
||||
var source = getSourceFromThumbnail(thumb);
|
||||
let source = getSourceFromThumbnail(thumb);
|
||||
showcase.attr("src", source);
|
||||
showcase.css({
|
||||
width: 'auto',
|
||||
|
|
@ -271,7 +262,6 @@ function changeImage(thumb) {
|
|||
});
|
||||
showcase.css('left', $(window).width()/2 +'px');
|
||||
showcase.css('top', $(window).height()/2 +'px');
|
||||
showcaseLink.attr("href", source);
|
||||
showcaseDownload.attr("href", source);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<a href="<?= $folderLink ?>">
|
||||
<span id="folder-title"><?= $folderTitle ?></span>
|
||||
<span id="folderTitle"><?= $folderTitle ?></span>
|
||||
<?php if ($photos > 1): ?>
|
||||
<span id="folder-photos"><?= $photos ?> photos</span>
|
||||
<span id="folderPhotos"><?= $photos ?> photos</span>
|
||||
<?php elseif ($photos == 1): ?>
|
||||
<span id="folder-photos"><?= $photos ?> photo</span>
|
||||
<span id="folderPhotos"><?= $photos ?> photo</span>
|
||||
<?php else: ?>
|
||||
<span id="folder-photos">vide</span>
|
||||
<span id="folderPhotos">vide</span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($albums > 1): ?>
|
||||
<span id="folder-albums"><?= $albums ?> albums</span>
|
||||
<span id="folderAlbums"><?= $albums ?> albums</span>
|
||||
<?php elseif ($albums == 1): ?>
|
||||
<span id="folder-albums"><?= $albums ?> album</span>
|
||||
<span id="folderAlbums"><?= $albums ?> album</span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<img src="<?= $imageSrc ?>" onclick="displayBig(this);" class="photo" id="<?= $imageId ?>"></img>
|
||||
<img src="<?= $imageSrc ?>" onclick="displayBig(this);" class="photo" id="<?= $imageId ?>" alt=""/>
|
||||
|
|
|
|||
42
photos.php
42
photos.php
|
|
@ -221,31 +221,32 @@ function generatePath($path)
|
|||
|
||||
?>
|
||||
<div class="inner">
|
||||
<div id="photo-overlay" style="display:none">
|
||||
<div id="photoOverlay" style="display:none">
|
||||
|
||||
<img src="" id="img-big">
|
||||
<img src="" id="imgBig">
|
||||
|
||||
<div id="close-back" onclick="closeBig()"></div>
|
||||
<div id="loading" onclick="closeBig()">
|
||||
<div id="closeBack" onclick="closeBig()"></div>
|
||||
<div id="loadingIconContainer" 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>
|
||||
<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>
|
||||
<div id="photoButtonsContainer">
|
||||
<div id="rightButton" onclick="displayNext(1)">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
<div id="leftButton" onclick="displayNext(-1)">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
</div>
|
||||
<a id="downloadButton" download="" href="">
|
||||
<i class="fas fa-download"></i>
|
||||
</a>
|
||||
<div id="closeButton">
|
||||
<i class="fas fa-times" onclick="closeBig()"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 id="photos_title">Photos</h1>
|
||||
<h1 id="photosTitle">Photos</h1>
|
||||
<p>Clique sur le dossier de ton choix pour afficher les photos. Il faut que tu sois inscrit à l'INSA pour pouvoir
|
||||
les regarder (et oui, pas de spoiler).
|
||||
</p>
|
||||
|
|
@ -260,6 +261,8 @@ function generatePath($path)
|
|||
generatePath(getActivePath());
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="photo-container">
|
||||
<?php if (getDirectoriesCount(photoRoot . getActivePath()) > 0): ?>
|
||||
<div class="photos-folder">
|
||||
<?php
|
||||
|
|
@ -270,9 +273,9 @@ function generatePath($path)
|
|||
<?php if (isAlbumAvailable(getActivePath())): ?>
|
||||
<a download=""
|
||||
href="photos_folders/photos<?php echo getActivePath() . DIRECTORY_SEPARATOR . GetActiveFolder(getActivePath()) ?>.zip"
|
||||
id="download-album">
|
||||
<span id="download-text"><i class="fas fa-download"></i>Télécharger l'album</span>
|
||||
<span id="album-photo-count"><?php echo getPhotoCount(photoRoot . getActivePath()) ?> photos</span>
|
||||
id="downloadAlbum">
|
||||
<span id="downloadText"><i class="fas fa-download"></i>Télécharger l'album</span>
|
||||
<span id="albumPhotoCount"><?php echo getPhotoCount(photoRoot . getActivePath()) ?> photos</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php if (getPhotoCount(photoRoot . getActivePath()) > 0): ?>
|
||||
|
|
@ -284,6 +287,7 @@ function generatePath($path)
|
|||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css">
|
||||
|
||||
<?php
|
||||
|
|
|
|||
Loading…
Reference in a new issue