Improved image player

assets/css/photos.css

@@ -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: 200px;
-    width: 140px;
-    height: 105px;
     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;
+    opacity: 0.5;
-    border-radius: 20px;
+    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 {
+#photoButtonsContainer {
-    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 {
     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;
+    }
+
 }

assets/js/photos.js

@@ -1,19 +1,17 @@
-let showcase = $("#img-big");
+let showcase = $("#imgBig");
-let showcaseButton = $("#photo-buttons");
+let showcaseButtonContainer = $("#photoButtonsContainer");
-let showcaseLink = $("#img_big_link");
+let showcaseDownload = $("#downloadButton");
-let showcaseDownload = $("#img_big_download");
+let photoOverlay = $("#photoOverlay");
-let photoOverlay = $("#photo-overlay");
 let headerTop = $("#header-top");
 let sideNav = $("#menuSidenav");
-let loading = $("#loading");
+let loading = $("#loadingIconContainer");
-var move_photo = false;
+let move_photo = false;
-var grab_offsetX = 0;
+let grab_offsetX = 0;
-var grab_offsetY = 0;
+let grab_offsetY = 0;
 
-var idle_time = 0;
+let idle_time = 0;
-var scaling = false;
+let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
-var isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;
+let isMouseOverButtons = false;
-var 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);
+    let elem = document.elementFromPoint(event.pageX, cursorY);
-    isMouseOverButtons = !(elem.id === "close-back" || elem.id === "img-big"); // Prevent entering fullscreen when cursor on control buttons
+    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(){
+function isFullscreen(){
-    return showcaseButton.css("display") === "none";
+    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');
+    let currentSrc = showcase.attr('src');
-    var photos = document.getElementsByClassName("photo");
+    let photos = document.getElementsByClassName("photo");
-    var current = 0;
+    let current = 0;
-    for (var i = 0; i < photos.length; i++) {
+    for (let i = 0; i < photos.length; i++) {
         if (getSourceFromThumbnail($(photos[i]).attr('src')) === currentSrc) {
             current = i;
         }
     }
-    var next = current + direction;
+    let next = current + direction;
-    var nextId = "";
+    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);
 
 }

includes/photos/folder_template.php

@@ -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>
 

includes/photos/photo_template.php

@@ -1 +1 @@
-<img src="<?= $imageSrc ?>" onclick="displayBig(this);" class="photo" id="<?= $imageId ?>"></img>
+<img src="<?= $imageSrc ?>" onclick="displayBig(this);" class="photo" id="<?= $imageId ?>" alt=""/>

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="closeBack" onclick="closeBig()"></div>
-        <div id="loading" onclick="closeBig()">
+        <div id="loadingIconContainer" onclick="closeBig()">
             <i class="fas fa-spinner fa-spin"></i>
         </div>
 
-        <div id="photo-buttons">
+        <div id="photoButtonsContainer">
-            <i id="right" class="fas fa-arrow-right" onclick="displayNext(1)"></i>
+            <div id="rightButton" onclick="displayNext(1)">
-            <i id="left" class="fas fa-arrow-left" onclick="displayNext(-1)"></i>
+                <i class="fas fa-arrow-right"></i>
-            <div id="photo-control">
+            </div>
-                <i id="close" class="fas fa-times" onclick="closeBig()"></i>
+            <div id="leftButton" onclick="displayNext(-1)">
-                <a id="img_big_download" download="" href="">
+                <i class="fas fa-arrow-left"></i>
-                    <i id="download" class="fas fa-download"></i>
+            </div>
-                </a>
+            <a id="downloadButton" download="" href="">
-                <a href="" id="img_big_link">
+                <i class="fas fa-download"></i>
-                    <i id="fullscreen" class="fas fa-expand-arrows-alt"></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">
+           id="downloadAlbum">
-            <span id="download-text"><i class="fas fa-download"></i>Télécharger l'album</span>
+            <span id="downloadText"><i class="fas fa-download"></i>Télécharger l'album</span>
-            <span id="album-photo-count"><?php echo getPhotoCount(photoRoot . getActivePath()) ?> photos</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