Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

Diaporama responsive avec filtre de recherche

Dernière modification : septembre 2022



<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 src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre2">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre3">
<img src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre4">
<img src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre5">
<img src="image.jpg" alt>
</label>
</li>
<li class="personnes">
<label for="fenetre6">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre7">
<img src="image.jpg" alt>
</label>
</li>
<li class="animaux">
<label for="fenetre8">
<img src="image.jpg" alt>
</label>
</li>
<li class="paysages">
<label for="fenetre9">
<img 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,ul{margin: 0}

ul{padding:0;list-style-type: none;}
	
	img{display:block;height:auto} 
    
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-flex;
justify-content: center;
font-size: 1.25rem;
background-color: #6753ea;
color: white;
padding: 5px 20px;
min-width: 15ch;
margin: .5rem;
	
	}

input[name="diapo"]:checked + label{
	
color:currentcolor;
background-color: #aaa
	
	}
/*quand on clique sur un label pour montrer qu'il est actif*/   

/*liste des images*/
.diaporama{
	
display:grid;grid-template-columns: repeat(3,1fr);
gap:1rem;
margin: 2rem auto;
justify-items: center
	
	}

.diaporama li{
	

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{

width: 100%;
object-fit: cover;
aspect-ratio: 3/2;
max-width: 200px;
box-shadow: 0 0 1rem hsla(0,0%,0%,.2);
border-radius: .5rem;
		
}


/*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;

	
}	
		
		
		
	
/*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: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0
	
	}
    
.fermer{
	
aspect-ratio:1;
display: flex;
justify-content: center;
align-items: center;
right: 1rem;
top: 1rem;
z-index: 1;
width: 3em;
  
}
.fermer::before,.fermer::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 4px;
background-color: #fff;
border-radius: 4px;
}
.fermer::before {
  transform: rotate(45deg);
}
.fermer::after {
  transform: rotate(-45deg);
}
    
.fenetre img{
	
max-height: 90%;
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: .4s opacity linear .4s
	
	}
    
    
    
.sous-couche{
opacity: 0;
left: 0;
top: 0;
background: hsla(0, 0%, 0%, 0.8);
will-change: opacity;
transition:.4s opacity linear;
z-index: 1
	}
    
.cache:checked~.sous-couche{
	
height: 100%;
width: 100%;
opacity: 1
	
	}    
    




Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.