Arragement dans la gallerie

static/divhider.js

@@ -11,3 +11,52 @@ function animation() {
 
 window.setTimeout(divhider, 2200);
 window.setTimeout(animation, 2000);
+
+let darkBoxVisible = false;
+
+window.addEventListener('load', (event) => {
+    let images = document.querySelectorAll("img");
+    if(images !== null && images !== undefined && images.length > 0) {
+	images.forEach(function(img) {
+	    img.addEventListener('click', (evt) => {
+		showDarkbox(img.src);
+	    });
+	});
+    }
+});
+
+function showDarkbox(url) {
+    if(!darkBoxVisible) {
+	let x = (window.innerWidth - 1280) / 2;
+	let y = window.scrollY + 50;
+
+	// Create the darkBox
+	var div = document.createElement("div");
+	div.id = "darkbox";
+        var tmp = url;
+        tmp = tmp.replace("thumbnails/", "");
+        tmp= tmp.trim();
+	div.innerHTML = '<img class="darkboximg" src="'+tmp+'" />';
+	document.body.appendChild(div);
+	let box = document.getElementById("darkbox");
+	box.style.left = x.toString()+"px";
+	box.style.top = y.toString()+"px";
+	box.style.height = 'auto';
+	box.addEventListener('click', (event) => {
+	    // Remove it
+	    let element = document.getElementById("darkbox");
+	    element.parentNode.removeChild(element);
+
+	    darkBoxVisible = false;
+	})
+
+	darkBoxVisible = true;
+
+    } else {
+	// Remove it
+	let element = document.getElementById("darkbox");
+	element.parentNode.removeChild(element);
+
+	darkBoxVisible = false;
+    }
+}

static/up.css

@@ -1,4 +1,3 @@
-
 #tada {
         text-align: center;
         text-decoration: none;
@@ -23,7 +22,7 @@
 	margin-bottom: 0%;
 	text-align: center;
 	width: 90%;
-		
+
 	-webkit-animation-name: apparition;
         -webkit-animation-duration: 0.2s;
         -webkit-animation-iteration-count: 1;
@@ -34,7 +33,7 @@
 
 .flashed {
 	list-style-type: none;
-	position: center; 
+	position: center;
 	margin: auto;
 	margin-top: 5%;
 	width: 50%;
@@ -42,7 +41,7 @@
 }
 
 .flashed p {
-	font-family: sans-serif; 
+	font-family: sans-serif;
 	text-align: center;
 	border-radius: 3px;
 	/*box-shadow: 1px 1px 1px black; */
@@ -50,12 +49,12 @@
 
 .succes p {
 	background-color: #CDCBD0;
-	color: #00A310; 
-} 
+	color: #00A310;
+}
 
 .error p {
-	background-color: #CDCBD0; 
-	color: #B80000; 
+	background-color: #CDCBD0;
+	color: #B80000;
 }
 
 #majuscule {
@@ -150,3 +149,66 @@
 
 /* ######### Animations ######### */
 
+#darkbox { width:1280px;
+           height:720px;
+           position:absolute;
+	   top:0;
+           left:0;
+           background-color:#333;
+           overflow: hidden;
+           text-align:center;
+           margin-top: 7%;
+	 }
+.darkboximg { padding:0; max-width: 1216px; max-height: 684px;}
+
+#gallery {
+  line-height:0;
+  -webkit-column-count:5;
+  -webkit-column-gap:5px;
+  -moz-column-count:5;
+  -moz-column-gap:5px;
+  column-count:5;
+  column-gap:5px;
+  margin-top:2rem;
+}
+
+#gallery img {
+  width: 100% !important;
+  height: auto !important;
+  margin-bottom:5px;
+  filter: grayscale(100%);
+  transition: filter 1s;
+}
+
+#gallery img:hover {
+  filter:none;
+}
+
+@media (max-width: 1200px) {
+  #gallery {
+    -moz-column-count:    4;
+    -webkit-column-count: 4;
+    column-count:         4;
+  }
+}
+@media (max-width: 1000px) {
+  #gallery {
+    -moz-column-count:    3;
+    -webkit-column-count: 3;
+    column-count:         3;
+  }
+}
+@media (max-width: 800px) {
+  #gallery {
+    -moz-column-count:    2;
+    -webkit-column-count: 2;
+    column-count:         2;
+  }
+}
+@media (max-width: 400px) {
+  #gallery {
+    -moz-column-count:    1;
+    -webkit-column-count: 1;
+    column-count:         1;
+  }
+}