Improved photo gallery

.idea/jsLibraryMappings.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="JavaScriptLibraryMappings">
-    <file url="PROJECT" libraries="{jQuery-2.0.0}" />
+    <file url="PROJECT" libraries="{all, jQuery-2.0.0, jquery, jquery-1.11.1, jquery-3.3.1, jquery.mobile-1.4.5}" />
   </component>
 </project>

assets/css/photos.css

@@ -1,6 +1,5 @@
 .photos_folder {
     width: 100%;
-    display: flex;
     border: 1px solid #5a5a5a;
     border-radius: 5px;
 }
@@ -19,7 +18,7 @@
     height: 100px;
     padding: 10px;
     margin: 5px;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     background-color: #1a1a1a;
@@ -57,10 +56,10 @@
 }
 
 .photos_path {
-    margin: 5px;
     width: 100%;
     display: flex;
     list-style: none;
+    padding: 0;
 }
 
 .photos_path a {
@@ -69,7 +68,7 @@
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
-    display: flex;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
     background-color: #1a1a1a;
@@ -79,36 +78,96 @@
 }
 
 #img_big {
+    margin: 0;
+    padding: 0;
     position: fixed;
     max-width: 100%;
-    max-height: 70%;
+    max-height: 100%;
+    z-index: 6;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
 }
 
-#close, #right, #left {
+#close, #right, #left, #fullscreen {
     color: white;
-    position: fixed;
+    width: 25px;
-    width: 50px;
+    height: 25px;
-    height: 50px;
     transition: 0.3s;
     cursor: pointer;
+    z-index: 7;
 }
 
 #right {
+    position: fixed;
+    height: 100%;
     right: 0;
-    bottom: 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;
 }
 
-#close {
+#fullscreen {
-    top: 50px;
+    color: #2377c6;
+    position: absolute;
     right: 0;
+    bottom: 0;
+}
+
+#right:hover, #left:hover {
+    width: 50px;
+}
+
+#right:active, #left:active {
+    width: 40px;
+}
+
+#close:hover, #fullscreen:hover {
+    height: 50px;
+    width: 50px;
+}
+
+#close:active, #fullscreen:active {
+    height: 40px;
+    width: 40px;
+}
+
+#photo_control {
+    position: fixed;
+    bottom: 0;
+    right: 50%;
+    transform: translateX(50%);
+    background: #1c1c1c;
+    height: 25px;
+    width: 75px;
+    border-radius: 5px;
+    transition: 0.3s;
+}
+
+#photo_control:hover {
+    height: 50px;
+}
+
+#photo_buttons{
+    position: fixed;
+    display: block;
+    z-index: 10;
 }
 
 #close_back {
@@ -117,12 +176,14 @@
     height: 100%;
 }
 
-#close:hover, #right:hover, #left:hover {
+#photo_overlay {
-    width: 70px;
+    top: 0;
-}
+    left: 0;
-
+    position: fixed;
-#close:active, #right:active, #left:active {
+    width: 100%;
-    width: 55px;
+    height: 100%;
+    background-color: #212121;
+    z-index: 5;
 }
 
 @media screen and (max-width: 480px) {

assets/css/style.css

@@ -31,8 +31,8 @@ Theme Styles
 
 body {
     /*Full page background*/
-    background-size: cover;
     background: url("../images/bg.jpg") no-repeat fixed center;
+    background-size: cover;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
@@ -50,7 +50,7 @@ h1, h2, h3, h4, h5, h6 {
     margin: 10px 0;
     color: #e0e0e0;
     font-family: 'Work Sans', sans-serif;
-    font-weight: bold;
+    font-weight: normal;
     letter-spacing: -1px;
     text-align: center;
 }
@@ -278,8 +278,8 @@ Full-Width Styles
 #table_coms{
     width: 100%;
     table-layout: auto;
-    text-align: left;
+    text-align: center;
-    border: none;
+    border: 1px solid #5c5c5c;
 }
 
 #table_coms td{
@@ -293,11 +293,6 @@ Full-Width Styles
     font-weight: bold;
 }
 
-.com_logo{
-    width: 100px;
-    min-width: 50px;
-}
-
 #back_button{
     top: 0;
     left: 0;
@@ -310,22 +305,27 @@ Full-Width Styles
     transition: 0.3s;
 }
 
-#photo_back_button{
-    top: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    background-color: #212121cc;
-    z-index: 5;
-    transition: 0.3s;
-}
-
 .active_background {
     z-index: 100 !important;
     opacity: 0.7 !important;
 }
 
+.main_button {
+    background: #1a1a1a;
+    padding: 10px;
+    border: 1px solid #5a5a5a;
+    border-radius: 5px;
+    font-size: 25px;
+    color: #b5b5b5;
+    box-shadow: 0 0 4px #000;
+}
+
+.main_button:hover {
+    box-shadow: 0 0 10px #000;
+    background-color: #e0e0e0;
+    color: black;
+}
+
 
 /*******************************************************************************
 Small Device Styles

assets/scripts/photosScript.js

@@ -1,6 +1,10 @@
 var showcase = $("#img_big");
+var showcaseButton = $("#photo_buttons");
 var showcaseLink = $("#img_big_link");
-var photoBackButton = $("#photo_back_button");
+var photoOverlay = $("#photo_overlay");
+var headerTop = $("#header_top");
+var sideNav = $("#menuSidenav");
+
 
 /*
  * Display selected image in showcase
@@ -8,17 +12,59 @@ var photoBackButton = $("#photo_back_button");
  */
 function displayBig(elem) {
     changeImage($(elem).attr('src'));
-    photoBackButton.css("display", "block");
+    disableFullscreen();
+    photoOverlay.fadeIn(500);
 }
 
-
 /*
  * Hide showcase image
  */
 function closeBig() {
-    photoBackButton.css("display", "none")
+    disableFullscreen();
+    photoOverlay.fadeOut(500);
 }
 
+/*
+ * Toggle display of buttons/header
+ */
+function toggleFullscreen() {
+    if (showcaseButton.css("display") == "none")
+        disableFullscreen();
+    else
+        enableFullscreen();
+}
+
+function enableFullscreen() {
+    showcaseButton.fadeOut(500);
+    headerTop.fadeOut(500);
+    sideNav.fadeOut(500);
+}
+
+function disableFullscreen() {
+    showcaseButton.fadeIn(500);
+    headerTop.fadeIn(500);
+    sideNav.fadeIn(500);
+}
+
+/*
+ * Control images with keyboard arrows
+ */
+$(document).keydown(function(e) {
+    switch(e.which) {
+        case 37: // left
+            displayNext(-1);
+            break;
+
+        case 39: // right
+            displayNext(1);
+            break;
+
+        default: return; // exit this handler for other keys
+    }
+    e.preventDefault(); // prevent the default action (scroll / move caret)
+});
+
+
 
 /*
  * Display next/last image in showcase. When reaching end/start, loop back to start/end

coms.php

@@ -6,73 +6,63 @@ ob_start(); // Start reading html
 <p>Tous les mails cités sur cette page se terminent par <strong>@etud.insa-toulouse.fr</strong></p>
 <?php
 $comTitle = "COM Anim";
-$comLogo = "assets/images/coms/logo.png";
 $comDescription = "Ici pour mettre l'ambiance toute la semaine!";
 $comRespo = "Paul MERLE";
 $comRespoId = "p_merle";
 include("includes/coms/com_template.php");
 
-$comId = "com_atterrissage";
-$comTitle = "COM Atterrissage";
-$comLogo = "assets/images/coms/logo.png";
-$comDescription = "Là pour sauver des vies";
-$comRespo = "Joan KO";
-$comRespoId = "ko";
-include("includes/coms/com_template.php");
-
-$comTitle = "COM Parrainage";
-$comLogo = "assets/images/coms/logo.png";
-$comDescription = "Ici pour vous aider à vous sentir moins perdus";
-$comRespo = "Léa LAXAGUE et Blaise MAUGARD";
-$comRespoId = "laxague ou bmaugard";
-include("includes/coms/com_template.php");
-
 $comTitle = "COM Escape Game";
-$comLogo = "assets/images/coms/logo.png";
+$comDescription = "Une matinée sur le campus de jeux en exterieur et d'énigmes";
-$comDescription = "Ici pour animer une après midi";
 $comRespo = "Manon TARRADE";
 $comRespoId = "mtarade";
 include("includes/coms/com_template.php");
 
-
 $comTitle = "COM Ville";
-$comLogo = "assets/images/coms/logo.png";
+$comDescription = "Une après midi en ville de jeux et énigmes";
-$comDescription = "Ici pour animer une autre après midi";
 $comRespo = "Baptiste LERAT";
 $comRespoId = "lerat";
 include("includes/coms/com_template.php");
 
 $comTitle = "COM Walle-E";
-$comLogo = "assets/images/coms/logo.png";
 $comDescription = "Une journée dans la foret de Boucone, avec de nombreuses activités le matin ayant pour but de nettoyer la foret, et une piscine en accès libre l'après midi";
 $comRespo = "Nélia BAHRAOUI et Lucas PERRIN";
 $comRespoId = "bahraoui ou lperin";
 include("includes/coms/com_template.php");
 
+$comTitle = "COM Parrainage";
+$comDescription = "Ici pour vous aider à vous sentir moins perdus";
+$comRespo = "Léa LAXAGUE et Blaise MAUGARD";
+$comRespoId = "laxague ou bmaugard";
+include("includes/coms/com_template.php");
+
 $comTitle = "COM Photos";
-$comLogo = "assets/images/coms/logo.png";
+$comDescription = "Souriez vous êtes filmés";
-$comDescription = "Souriez vous êtes suivis";
 $comRespo = "Lyana LETOURNEAU";
 $comRespoId = "lletourn";
 include("includes/coms/com_template.php");
 
+
+$comTitle = "COM Plaquette";
+$comDescription = "Grâce à eux vous avez des devoirs pendant les vacances";
+$comRespo = "Vincent SOISSONS";
+$comRespoId = "soissons";
+include("includes/coms/com_template.php");
+
+$comId = "com_atterrissage";
+$comTitle = "COM Atterrissage";
+$comDescription = "Là pour sauver des vies";
+$comRespo = "Joan KO";
+$comRespoId = "ko";
+include("includes/coms/com_template.php");
+
 $comTitle = "COM Ravitaillement";
-$comLogo = "assets/images/coms/logo.png";
 $comDescription = "La bouf !";
 $comRespo = "Zoé PHILIPPON";
 $comRespoId = "philippo";
 include("includes/coms/com_template.php");
 
-$comTitle = "COM Plaquette";
-$comLogo = "assets/images/coms/logo.png";
-$comDescription = "Grâce à eux vous avez de la lecture";
-$comRespo = "Vincent SOISSONS";
-$comRespoId = "soissons";
-include("includes/coms/com_template.php");
-
 $comTitle = "Spe Bar";
-$comLogo = "assets/images/coms/logo.png";
+$comDescription = "La boisson !";
-$comDescription = "Pour vous abreuver";
 $comRespo = "Louis GALZIN";
 $comRespoId = "galzin";
 include("includes/coms/com_template.php");

includes/coms/com_template.php

@@ -1,7 +1,6 @@
 <h3 id="<?= $comId ?>"><?= $comTitle ?></h3>
 <table id="table_coms">
     <tr>
-        <td rowspan="4"><img src="<?= $comLogo ?>" alt="COM logo" class="com_logo"></td>
         <td class="com_description"><?= $comDescription ?></td>
     </tr>
     <tr>

includes/sidenav.html

@@ -1,10 +1,10 @@
 <div id="menuSidenav" class="sidenav">
-    <a href="index.php" id="index" class="page-link"><span class="fas fa-home"></span> L'Accueil</a>
+    <a href="index.php" id="index" class="page-link"><i class="fas fa-home"></i> L'Accueil</a>
-    <a href="planning.php" id="planning" class="page-link"><span class="fas fa-calendar-alt"></span> Le Planning</a>
+    <a href="planning.php" id="planning" class="page-link"><i class="fas fa-calendar-alt"></i> Le Planning</a>
-    <a href="coms.php" id="coms" class="page-link"><span class="fas fa-users"></span> Les Coms</a>
+    <a href="prevs.php" id="prevs" class="page-link"><i class="fas fa-medkit"></i> La Prévention</a>
-    <a href="parrainage.php" id="parrainage" class="page-link"><span class="fas fa-user-plus"></span> Le Parrainage</a>
+    <a href="parrainage.php" id="parrainage" class="page-link"><i class="fas fa-user-plus"></i> Le Parrainage</a>
-    <a href="prevs.php" id="prevs" class="page-link"><span class="fas fa-medkit"></span> La Prévention</a>
+    <a href="photos.php" id="photos" class="page-link"><i class="fas fa-camera"></i> Les Photos</a>
-    <a href="photos.php" id="photos" class="page-link"><span class="fas fa-camera"></span> Les Photos</a>
     <br>
-    <a href="infos.php" id="contact" class="page-link"><span class="fas fa-info"></span> Les Infos</a>
+    <a href="coms.php" id="coms" class="page-link"><i class="fas fa-users"></i> Les Coms</a>
+    <a href="infos.php" id="contact" class="page-link"><i class="fas fa-info"></i> Les Infos</a>
 </div>

index.php

@@ -24,6 +24,10 @@ include("includes/sidenav.html");
             meilleures conditions.</p>
         <br>
         <p>Utilise le menu en haut à gauche pour naviguer sur le site.</p>
+        <p>Voici les pages les plus importantes :</p>
+        <a class="main_button" href="planning.php">Planning</a>
+        <a class="main_button" href="parrainage.php">Parrainage</a>
+
     </section>
 </div>
 </body>

photos.php

@@ -24,7 +24,7 @@ function getDirectories($dir)
         $path = realpath($dir . DIRECTORY_SEPARATOR . $value);
         if (is_dir($path) && $value != "." && $value != "..") {
             $folderTitle = $value;
-            $folderLink = "?folder=" . getActiveFolder() . $value . DIRECTORY_SEPARATOR;
+            $folderLink = "?folder=" . getActiveFolder() . $value;
             $folderClass = "";
             include("includes/photos/folder_template.php");
             $displayedItems++;
@@ -47,7 +47,7 @@ function getPhotos($dir)
         if (!is_dir($path)) {
             $ext = pathinfo($path, PATHINFO_EXTENSION);
             if ($ext == "bmp" || $ext == "jpg" || $ext == "jpeg" || $ext == "png") {
-                $imageSrc = getActiveFolder() . $value;
+                $imageSrc = $dir . $value;
                 $imageId = "photo-" . $displayedItems;
                 include("includes/photos/photo_template.php");
                 $displayedItems++;
@@ -79,19 +79,30 @@ function generatePath($dir)
 }
 
 ?>
-<div id="photo_back_button" style="display:none">
+<div id="photo_overlay" style="display:none">
-    <div id="close_back" onclick="closeBig()"><span class="fas fa-times" id="close"></span></div>
+
-    <span id="right" class="fas fa-arrow-right" onclick="displayNext(1)"></span>
+    <img src="" id="img_big" onclick="toggleFullscreen()">
-    <span id="left" class="fas fa-arrow-left" onclick="displayNext(-1)"></span>
+
+    <div id="close_back" onclick="closeBig()"></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 href="" id="img_big_link">
-        <img src="" id="img_big"></img>
+                <i id="fullscreen" class="fas fa-expand-arrows-alt" ></i>
             </a>
         </div>
+    </div>
+
+
+
+</div>
 
 <h1>Photos</h1>
 <p>Cliquez sur le dossier de votre choix pour afficher les photos</p>
 <ul class="photos_path">
-    <p>Chemin : </p>
+    <li><p>Chemin : </p></li>
     <?php
     generatePath(getActiveFolder());
     ?>

planning.php

@@ -1,4 +1,4 @@
-<?php
+<?
 ob_start(); // Start reading html
 ?>
 <h1> Le Planning</h1>

template.php

@@ -11,6 +11,7 @@
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/planning_events.css">
     <link rel="stylesheet" type="text/css" media="screen" href="assets/css/photos.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Nunito+Sans|Work+Sans" rel="stylesheet">
 </head>
 <body id="main">