- 
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+ ![]()
+
+
+
diff --git a/src/js/modale.js b/src/js/modale.js
new file mode 100644
index 0000000..eec1056
--- /dev/null
+++ b/src/js/modale.js
@@ -0,0 +1,39 @@
+var numberOfImages = 9;
+var currentImageNumber = null;
+
+function viewPicture (number) {
+ document.getElementById('modale').style.display = 'flex';
+ document.getElementById('body').style.overflow = 'hidden';
+ getPicture(number);
+}
+
+function getPicture (number) {
+ currentImageNumber = number;
+ document.getElementById('modale_wide_view').src = 'img/hd/galerie' + number + '.jpg';
+}
+
+function closeModalView () {
+ document.getElementById('modale').style.display = 'none';
+ document.getElementById('body').style.overflow = 'auto';
+}
+
+function leftModalView () {
+ getPicture((currentImageNumber - 1 + numberOfImages) % numberOfImages);
+}
+
+function rightModalView () {
+ getPicture((currentImageNumber + 1) % numberOfImages);
+}
+
+/* Close modale when pressing escape */
+// TODO
+/*
+window.onload = function () {
+ document.getElementById('body').addEventListener('keypress', function(e) {
+ console.log(e)
+ if(e.key == "Escape"){
+ closeModalView()
+ }
+ });
+}
+*/
diff --git a/src/main.css b/src/main.css
index 61c14d4..29de4fb 100644
--- a/src/main.css
+++ b/src/main.css
@@ -11,6 +11,10 @@ body {
color: #444;
}
+button, .button {
+ cursor: pointer;
+}
+
h1 {
font-family: Kiona;
font-size: 121px;
@@ -69,7 +73,7 @@ h1,h2 {
color: #222;
}
-section {
+section:not(#modale){
margin: 5em 10px 0;
}
@@ -171,6 +175,13 @@ header #download {
object-fit: cover;
}
+#galerie .content > div {
+ background-size: cover;
+ cursor: pointer;
+ background-position-y: center;
+ background-position-x: center;
+}
+
#galerie .content>div:nth-child(1){
grid-column: span 3;
grid-row: span 6;
@@ -265,4 +276,52 @@ ul,ol,li {
.a {
color: #005700;
+}
+
+#modale {
+ position: fixed;
+ background-color: #000000dd;
+ display: none;
+ width: 100vw;
+ height: 100vh;
+ top: 0;
+ left: 0;
+ text-align: center;
+}
+
+#modale img {
+ max-width: calc(100% - 100px);
+ max-height: 100%;
+ object-fit: contain;
+}
+
+#modale button:not(.close) {
+ flex: auto;
+ background: none;
+ border: none;
+ padding: 0;
+}
+
+#modale button.close, #modale button div {
+ background-color: #333;
+ color: #AAA;
+ border-radius: 100%;
+ display: inline-block;
+ border: none;
+}
+
+#modale button:not(.close) div {
+ height: 35px;
+ width: 35px;
+ line-height: 30px;
+}
+
+#modale button.close {
+ position: absolute;
+ top: 2px;
+ right: 2px;
+ height: 50px;
+ width: 50px;
+ line-height: 45px;
+ padding: 0;
}
\ No newline at end of file
+
-
+
-
@@ -181,5 +173,37 @@
+
+
-
+
+