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