forked from rebillar/site-accueil-insa
Improved photo gallery
This commit is contained in:
Keplyx
parent
12e172c0c3
commit
7edca13675
11 changed files with 209 additions and 97 deletions
|
|
@ -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>
|
||||
|
|
@ -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: 50px;
|
||||
height: 50px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
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 {
|
||||
top: 50px;
|
||||
#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 {
|
||||
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 {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
#close:active, #right:active, #left:active {
|
||||
width: 55px;
|
||||
#photo_overlay {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #212121;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
border: none;
|
||||
text-align: center;
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
58
coms.php
58
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 = "Ici pour animer une après midi";
|
||||
$comDescription = "Une matinée sur le campus de jeux en exterieur et d'énigmes";
|
||||
$comRespo = "Manon TARRADE";
|
||||
$comRespoId = "mtarade";
|
||||
include("includes/coms/com_template.php");
|
||||
|
||||
|
||||
$comTitle = "COM Ville";
|
||||
$comLogo = "assets/images/coms/logo.png";
|
||||
$comDescription = "Ici pour animer une autre après midi";
|
||||
$comDescription = "Une après midi en ville de jeux et énigmes";
|
||||
$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 suivis";
|
||||
$comDescription = "Souriez vous êtes filmés";
|
||||
$comRespo = "Lyana LETOURNEAU";
|
||||
$comRespoId = "lletourn";
|
||||
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";
|
||||
$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";
|
||||
$comDescription = "La bouf !";
|
||||
$comRespo = "Zoé PHILIPPON";
|
||||
$comRespoId = "philippo";
|
||||
include("includes/coms/com_template.php");
|
||||
|
||||
$comTitle = "Spe Bar";
|
||||
$comLogo = "assets/images/coms/logo.png";
|
||||
$comDescription = "Pour vous abreuver";
|
||||
$comDescription = "La boisson !";
|
||||
$comRespo = "Louis GALZIN";
|
||||
$comRespoId = "galzin";
|
||||
include("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>
|
||||
|
|
|
|||
|
|
@ -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="planning.php" id="planning" class="page-link"><span class="fas fa-calendar-alt"></span> Le Planning</a>
|
||||
<a href="coms.php" id="coms" class="page-link"><span class="fas fa-users"></span> Les Coms</a>
|
||||
<a href="parrainage.php" id="parrainage" class="page-link"><span class="fas fa-user-plus"></span> 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"><span class="fas fa-camera"></span> Les Photos</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"><i class="fas fa-calendar-alt"></i> Le Planning</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"><i class="fas fa-user-plus"></i> Le Parrainage</a>
|
||||
<a href="photos.php" id="photos" class="page-link"><i class="fas fa-camera"></i> 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
31
photos.php
31
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="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>
|
||||
<span id="left" class="fas fa-arrow-left" onclick="displayNext(-1)"></span>
|
||||
<a href="" id="img_big_link">
|
||||
<img src="" id="img_big"></img>
|
||||
</a>
|
||||
<div id="photo_overlay" style="display:none">
|
||||
|
||||
<img src="" id="img_big" onclick="toggleFullscreen()">
|
||||
|
||||
<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">
|
||||
<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());
|
||||
?>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<?php
|
||||
<?
|
||||
ob_start(); // Start reading html
|
||||
?>
|
||||
<h1> Le Planning</h1>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
@ -39,7 +40,7 @@ include("includes/sidenav.html");
|
|||
<p class="copyright">
|
||||
<script type="text/javascript">
|
||||
var d = new Date();
|
||||
document.write("Copyright © " + d.getFullYear() + "Arnaud VERGNET")
|
||||
document.write("Copyright © " + d.getFullYear() + " Arnaud VERGNET")
|
||||
</script>
|
||||
</p>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue