Ajouter un filtre d'image à sa galerie

Ajouter un filtre d'image à sa galerie

Galerie aucun
Le filtre permet d'améliorer la vue de votre galerie en permettant à l'utilisateur de voir les images qui l'intéresse en particulier.
Dans l'article précédent , une galerie a été réalisée, tout ça est très bien mais au fur et à mesure du temps, le nombre d'images de votre galerie va augmenter et il sera difficile au visiteur de voir toutes vos images. C'est pourquoi, il est parfois nécessaire de créer un filtre d'images, c'est ce que nous allons voir dans cet article.


Reprenons la galerie créée dans le précédent article : Créer une galerie d'images avec jQuery pour y ajouter le filtre.

Dans le fichier HTML, il faut ajouter le filtre, il sera sous forme de menu comme ci-dessous
<nav class="tri">
<div class="container">
<ul>
<li id="all" class="active">Toutes</li>
<li id="montBlanc" class="">Mont Blanc</li>
<li id="aiguille" class="">Aiguille du Midi</li>
<li id="telepherique" class="">Téléphérique</li>
</ul>
</div>
</nav>

Par conséquent, l'image doit également posséder une classe qui pointe vers la catégorie appropriée. Cette classe est ajoutée dans la balise <figure> de chaque image. Par exemple, si la première image de la galerie représente le Mont-Blanc, il faut écrire dans le html :

<figure class="montBlanc" style="background:url('https://cdn.pixabay.com/photo/2016/08/18/11/59/mont-blanc-1602750_960_720.jpg') no-repeat top center; background-size:cover;">

Pour chaque item du menu filtre, on lui attribue une catégorie, ici par exemple "montBlanc". Et le CSS serait de la forme :

nav.tri {
background:#008080;
height:3rem;
}

.container {
width:70%;
margin:0 auto;
}

nav.tri ul { margin:0; padding:0;}

nav.tri ul li{
display:inline-block;
list-style:none;
line-height: 3rem;
cursor: pointer;
padding: 0 15px;
color:#fff;
}

nav.tri ul li:hover {
background-color:#008080;
color:#333;
}

nav.tri li.active {
background:#fff;
color:#333;
}

On y ajoute le CSS pour la version mobile et tablette. La galerie sera maintenant sur une seule colonne et prendra la quasi totalité de la fenêtre. Ensuite pour le contenu des images, l'image prendra toute la largeur de la boîte.

@media (max-width: 1024px) {
#box {width:95%;}
#box figure {
width: 100%;
max-width: 100%;
}
.contentBox {width:90%;}
.contentBox img{
width:100%;
margin-right:0;
}
}


Passons maintenant au script du filtre d'images à savoir n'afficher que les images possédant la catégorie sélectionnée. Une grande partie du script a déjà été écrite lors du précédent article : Créer une galerie d'images avec jQuery. Seulement l'ajout de variables et 2 fonctions suffisent pour avoir un filtre d'images.

var triItem = $(".tri ul li");
var j=0;
toSortId="all";

La fonction item_filter() teste quelle est la catégorie sélectionnée et affiche les images de cette catégorie et l'autre fonction récupère l'identifiant de la catégorie cliquée pour ensuite appeler la fonction item_filter() ou all().

function item_filter() {
$("#box figure").show();
portfolioItem.each(function() {
if($(this).hasClass(toSortId)) {
$("#box figure").css("margin","0.8rem");
$(".contentBox",this).addClass("select");
$(this).on("click",function(){
$("#back").show().css({height:height_contentBox()+"px"});
$(this).find(".contentBox",this).show().css({top:top_slide()+"px"});
});
next();
prev();
close();
}
else {
$(this).hide();
}
});
}

all();

triItem.click(function() {
toSortId = $(this).attr("id");
$(".tri .active").removeClass("active");
$("#"+toSortId).addClass("active");
$("figure > .contentBox").removeClass("select");
if(toSortId == "all") {
 all();
}
else {
item_filter();
}
});

Ainsi se termine le code pour la création d'un filtre d'image et sa galerie. Vous pouvez retrouvez le code complet ici. Vous avez bien sûr la possibilité de changer à votre guise l'apparence de la galerie ou ajouter un effet sur les images lors de la sélection de la catégorie. Vous pourriez aussi mettre en place un lazy-loading des images de votre galerie pour améliorer les performances d'affichage de votre galerie.