Diaporama responsive avec filtre de recherche









Code :
HTML
<input type="radio" id="tout" name="diapo" checked>
<label for="tout">TOUT</label>
<input type="radio" id="animaux" name="diapo">
<label for="animaux">Animaux</label>
<input type="radio" id="paysages" name="diapo">
<label for="paysages">Paysages</label>
<input type="radio" id="personnes" name="diapo">
<label for="personnes">Personnes</label>
<input type="radio" name="galerie" id="fermer">
<input type="radio" name="galerie" id="fenetre1" class="cache">
<input type="radio" name="galerie" id="fenetre2" class="cache">
<input type="radio" name="galerie" id="fenetre3" class="cache">
<input type="radio" name="galerie" id="fenetre4" class="cache">
<input type="radio" name="galerie" id="fenetre5" class="cache">
<input type="radio" name="galerie" id="fenetre6" class="cache">
<input type="radio" name="galerie" id="fenetre7" class="cache">
<input type="radio" name="galerie" id="fenetre8" class="cache">
<input type="radio" name="galerie" id="fenetre9" class="cache">
<label for="fermer" class="sous-couche"></label>
<ul class="diaporama">
<li class="animaux">
<label for="fenetre1">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre2">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre3">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre4">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre5">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre6">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre7">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre8">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre9">
<img height=200 width=300 src="image.jpg" alt>
</label>
</li>
</ul>
<div class="fenetre fenetre1">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre2">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre3">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre4">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre5">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre6">
<label for="fermer" class="fermer"></label
><img src="image.jpg" alt>
</div>
<div class="fenetre fenetre7">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre8">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
<div class="fenetre fenetre9">
<label for="fermer" class="fermer"></label>
<img src="image.jpg" alt>
</div>
CSS
*{box-sizing: border-box}
body{margin: 0}
ul{padding: 0}
img{object-fit:cover;max-width:100%}
input{
display:none
}/*on cache tous les input*/
label{
cursor:pointer
}/*on pointe tous les labels (tri + ouverture-fermeture lightbox*/
/*on personnalise les label*/
input[name="diapo"] + label{
display: inline-block;
text-align: center;
font-size: 1.2rem;
width: 12rem;
border-bottom: 1px solid #2C3E50;
padding: 5px 20px
}
input[name="diapo"]:checked + label{
color: white;
background: #2C3E50
}
/*quand on clique sur un label pour montrer qu'il est actif*/
/*liste des images*/
.diaporama{
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: 10px auto;
overflow: hidden
}
.diaporama li{
margin: 1rem auto;
will-change: opacity;
opacity: 1;/*on rend visible toutes les images pour pouvoir ensuite faire disparaitre certaines images avec le filtre en jouant sur l'opacite*/
transition: opacity .5s linear /*transition opacite sur les images*/
}
.diaporama li img{
border: 5px solid #ccc
}
/*filtre*/
#animaux:checked ~ .diaporama li:not(.animaux),
#paysages:checked ~ .diaporama li:not(.paysages),
#personnes:checked ~ .diaporama li:not(.personnes){
opacity: .1
}/*ici on indique que les images non selectionnees (li:not) par le filtre ne seront presque plus visibles*/
#animaux:checked ~ .diaporama li:not(.animaux) label,
#personnes:checked ~ .diaporama li:not(.personnes) label,
#paysages:checked ~ .diaporama li:not(.paysages) label{
pointer-events: none
}/*ici on indique qu'on ne peut pas cliquer sur les images non selectionnees par le filtre-on peut mette aussi display:none ce qui fera disparaitre les photos non selectionnees*/
/*nombre de photos*/
input[name="diapo"]:checked + label:after{
content: '(3)';
padding-left: 5px
}
#tout:checked + label:after{
content: '(9)';
padding-left: 5px
}
.sous-couche,
.fenetre{
position:fixed
}
.fermer,
.fenetre img{
position: absolute
}
.fenetre{
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0
}
.fermer{
width: 3.125rem;
height: 3.125rem;
right: 0;
top: 0;
z-index: 2
}
.fenetre img{
max-height: 90%;
max-height: 80vmin;
max-width: 90%;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0
}
#fenetre1:checked ~ .fenetre1,
#fenetre2:checked ~ .fenetre2,
#fenetre3:checked ~ .fenetre3,
#fenetre4:checked ~ .fenetre4,
#fenetre5:checked ~ .fenetre5,
#fenetre6:checked ~ .fenetre6,
#fenetre7:checked ~ .fenetre7,
#fenetre8:checked ~ .fenetre8,
#fenetre9:checked ~ .fenetre9{
visibility: visible;
opacity: 1;
transition: 1s opacity linear}
.sous-couche{
opacity: 0;
left: 0;
top: 0;
background: hsla(0, 0%, 0%, 0.8);
transition: 1s opacity linear;
z-index: 1
}
.cache:checked~.sous-couche{
height: 100%;
width: 100%;
opacity: 1
}
Source, inspiration, ressources :
A voir sur ce blog un article sur la propriété object-fit
.
A voir sur ce blog une démonstration CSS switcher layout.
Vous rencontrez un problÚme avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.