gallerie
Adrian Amaglio
BIN
src/img/hd/IMG_9329 - Copie.jpg
Normal file
|
After Width: | Height: | Size: 6.6 MiB |
BIN
src/img/hd/IMG_9428.jpg
Normal file
|
After Width: | Height: | Size: 12 MiB |
BIN
src/img/hd/IMG_9465.jpg
Normal file
|
After Width: | Height: | Size: 9.9 MiB |
BIN
src/img/hd/IMG_9489.jpg
Normal file
|
After Width: | Height: | Size: 8.2 MiB |
BIN
src/img/hd/galerie0.jpg
Normal file
|
After Width: | Height: | Size: 10 MiB |
BIN
src/img/hd/galerie1.jpg
Normal file
|
After Width: | Height: | Size: 7.9 MiB |
BIN
src/img/hd/galerie2.jpg
Normal file
|
After Width: | Height: | Size: 9.0 MiB |
BIN
src/img/hd/galerie3.jpg
Normal file
|
After Width: | Height: | Size: 9.7 MiB |
BIN
src/img/hd/galerie4.jpg
Normal file
|
After Width: | Height: | Size: 10 MiB |
BIN
src/img/hd/galerie5.jpg
Normal file
|
After Width: | Height: | Size: 8.4 MiB |
BIN
src/img/hd/galerie6.jpg
Normal file
|
After Width: | Height: | Size: 7.3 MiB |
BIN
src/img/hd/galerie7.jpg
Normal file
|
After Width: | Height: | Size: 9.7 MiB |
BIN
src/img/hd/galerie8.jpg
Normal file
|
After Width: | Height: | Size: 9.4 MiB |
BIN
src/img/miniature/galerie0.jpg
Normal file
|
After Width: | Height: | Size: 281 KiB |
BIN
src/img/miniature/galerie1.jpg
Normal file
|
After Width: | Height: | Size: 214 KiB |
BIN
src/img/miniature/galerie2.jpg
Normal file
|
After Width: | Height: | Size: 162 KiB |
BIN
src/img/miniature/galerie3.jpg
Normal file
|
After Width: | Height: | Size: 240 KiB |
BIN
src/img/miniature/galerie4.jpg
Normal file
|
After Width: | Height: | Size: 200 KiB |
BIN
src/img/miniature/galerie5.jpg
Normal file
|
After Width: | Height: | Size: 162 KiB |
BIN
src/img/miniature/galerie6.jpg
Normal file
|
After Width: | Height: | Size: 204 KiB |
BIN
src/img/miniature/galerie7.jpg
Normal file
|
After Width: | Height: | Size: 183 KiB |
BIN
src/img/miniature/galerie8.jpg
Normal file
|
After Width: | Height: | Size: 148 KiB |
BIN
src/img/miniature/img_8666.jpg
Normal file
|
After Width: | Height: | Size: 126 KiB |
@ -5,10 +5,11 @@
|
||||
<meta lang="fr" />
|
||||
<link rel="stylesheet" href="./main.css" />
|
||||
<link rel="stylesheet" href="./fonts/fonts.css" />
|
||||
<script type="text/javascript" src="js/modale.js"></script>
|
||||
<title>Métamorphose</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body id="body">
|
||||
<header>
|
||||
<h1><div>Méta</div><div>morph<span class="couleur">o</span>se</div></h1>
|
||||
<h4><span class="couleur">Manifeste de mode de seconde main,</span> Manifeste pour la mode de demain.</h4>
|
||||
@ -106,32 +107,23 @@
|
||||
<h2>Galerie</h2>
|
||||
<div class="wrapper">
|
||||
<div class="content">
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(0)" style="background-image: url('img/miniature/galerie0.jpg'); background-position-y: 95%;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(1)" style="background-image: url('img/miniature/galerie1.jpg');">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(2)" style="background-image: url('img/miniature/galerie2.jpg'); background-position-y: 75%;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(3)" style="background-image: url('img/miniature/galerie3.jpg'); background-position-y: 25%;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(4)" style="background-image: url('img/miniature/galerie4.jpg'); background-position-y: 73%;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(5)" style="background-image: url('img/miniature/galerie5.jpg');">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(6)" style="background-image: url('img/miniature/galerie6.jpg');">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(7)" style="background-image: url('img/miniature/galerie7.jpg');">
|
||||
</div>
|
||||
<div>
|
||||
<img src="img/galerie1.jpg" />
|
||||
<div onclick="viewPicture(8)" style="background-image: url('img/miniature/galerie8.jpg');">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,5 +173,37 @@
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="modale">
|
||||
<button onclick="closeModalView()" title="Revenir au site" class="close">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 172 172">
|
||||
<g>
|
||||
<path d="M169.34609,86c0,-46.02344 -37.32266,-83.34609 -83.34609,-83.34609c-46.02344,0 -83.34609,37.32266 -83.34609,83.34609c0,46.02344 37.32266,83.34609 83.34609,83.34609c46.02344,0 83.34609,-37.32266 83.34609,-83.34609z" fill="#333"></path>
|
||||
<path d="M95.74219,86l24.35547,-28.28594c2.65391,-3.09062 2.31797,-7.72656 -0.77266,-10.41406c-3.09063,-2.65391 -7.72656,-2.31797 -10.38047,0.77266l-22.94453,26.63984l-22.91094,-26.60625c-2.65391,-3.09062 -7.32344,-3.42656 -10.41406,-0.77266c-3.09062,2.65391 -3.42656,7.32344 -0.77266,10.41406l24.35547,28.25234l-24.35547,28.28594c-2.65391,3.09062 -2.31797,7.72656 0.77266,10.41406c1.37734,1.20937 3.09062,1.78047 4.80391,1.78047c2.08281,0 4.13203,-0.87344 5.57656,-2.55313l22.91094,-26.60625l22.91094,26.60625c1.44453,1.67969 3.52734,2.55313 5.57656,2.55313c1.71328,0 3.42656,-0.57109 4.80391,-1.78047c3.09063,-2.65391 3.42656,-7.32344 0.77266,-10.41406z" fill="#AAA"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<button onclick="leftModalView()" title="Photo précédente" class="left">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 172 172">
|
||||
<g>
|
||||
<path d="M2.65391,86c0,-46.02344 37.32266,-83.34609 83.34609,-83.34609c46.02344,0 83.34609,37.32266 83.34609,83.34609c0,46.02344 -37.32266,83.34609 -83.34609,83.34609c-46.02344,0 -83.34609,-37.32266 -83.34609,-83.34609z" fill="#333"></path>
|
||||
<path d="M77.73594,86.90703c10.31328,-10.31328 20.62656,-20.62656 30.93984,-30.93984c9.00312,-9.00313 -5.00547,-22.91094 -14.04219,-13.87422c-12.63125,12.63125 -25.2625,25.2625 -37.89375,37.89375c-3.82969,3.82969 -3.69531,10.17891 0.06719,13.94141c12.63125,12.63125 25.2625,25.2625 37.89375,37.89375c9.00313,9.00313 22.91094,-5.00547 13.87422,-14.04219c-10.27969,-10.31328 -20.55938,-20.59297 -30.83906,-30.87266z" fill="#AAA"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<img id="modale_wide_view" href=""/>
|
||||
<button onclick="rightModalView()" title="Photo suivante" class="right">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 172 172">
|
||||
<g>
|
||||
<path d="M2.65391,86c0,-46.02344 37.32266,-83.34609 83.34609,-83.34609c46.02344,0 83.34609,37.32266 83.34609,83.34609c0,46.02344 -37.32266,83.34609 -83.34609,83.34609c-46.02344,0 -83.34609,-37.32266 -83.34609,-83.34609z" fill="#333"></path>
|
||||
<path d="M120.06406,79.88594c-12.63125,-12.63125 -25.2625,-25.2625 -37.89375,-37.89375c-9.00313,-9.00313 -22.91094,5.00547 -13.87422,14.04219c10.27969,10.27969 20.59297,20.55937 30.87266,30.87266c-10.31328,10.31328 -20.62656,20.62656 -30.93984,30.93984c-9.00313,9.00312 5.00547,22.91094 14.04219,13.87422c12.63125,-12.63125 25.2625,-25.2625 37.89375,-37.89375c3.7625,-3.79609 3.66172,-10.17891 -0.10078,-13.94141z" fill="#AAA"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
39
src/js/modale.js
Normal file
@ -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()
|
||||
}
|
||||
});
|
||||
}
|
||||
*/
|
||||
61
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;
|
||||
}
|
||||