Guillaume Duverger - Développement & Graphisme - Blog

Diaporama responsive avec filtre de recherche

Code :

<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>

*{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
	
	}