MixItUp – Plugin jQuery pour filtrer et ordonner du contenu dynamiquement

Cet article a 1 année. Il commence à dater, lisez-le donc en gardant son âge en tête ! Merci

MixItUp est un plugin jQuery dans la lignée de Masonry ou Isotope (Isotope qui utilise d’ailleurs Masonry) qui permettent d’ordonner et filtrer une partie de votre contenu selon des critères entièrement personnalisables. Créez des filtres personnalisés facilement selon le besoin de votre projet.

Ses plus

Pour ne pas avoir tellement exploré ses grandes soeurs, je vais avoir du mal à bien comparer les extensions, alors je vais surtout vous présenter ce qui m’a plu sur ce plugin jQuery.

  • La facilité de mise en place
  • L’API qui permet d’accéder à pas mal de choses
  • Les animations et effet mettant à profit CSS3
  • Le poids du plugin (14ko non gzippé)
  • Possibilité de faire varier la mise en page (plus d’info sur la démo en anglais)
  • Les filtres personnalisables

Ses moins

Il y en a toujours, voici ceux que j’ai noté :

  • Il ne propose pas de mise en page « serrée » comme le propose Masonry
  • Le tutoriel de base en anglais invite à faire des choses pas top côté accessibilité/bonnes pratiques
  • Il y a quelques bugs visuels variables en fonction du navigateur (vraiment très légers)
  • Les animations ne fonctionnent pas sur IE < 9… :p

Voyons comment le mettre en place simplement.

Mise en place de MixItUp

Il ne faut pas oublier que JavaScript doit être une sur-couche à un contenu existant sur votre site web. Si vous partez de cette réflexion, alors vous n’aurez jamais de problème si votre visiteur navigue sans JavaScript (volontairement ou non).

Voir la démonstration

Partons donc du principe que vous avez une belle galerie dont le HTML a cette forme :

<ul id="grid">
	<li class="mix trees" data-alphabetic="Arbres" data-numeric="6">
		<img src="img/trees.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix eyes human" data-alphabetic="Yeux d'humain" data-numeric="5">
		<img src="img/human-eye2.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix animals eyes" data-alphabetic="Yeux d'animaux" data-numeric="4">
		<img src="img/tiger-eye.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix trees" data-alphabetic="Arbres" data-numeric="1">
		<img src="img/trees2.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix animals trees" data-alphabetic="Panda Roux" data-numeric="2">
		<img src="img/panda-roux.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix humans tree" data-alphabetic="Silhouette" data-numeric="3">
		<img src="img/silhouette.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix animals" data-alphabetic="Renard" data-numeric="8">
		<img src="img/fox.jpg" width="240" height="160" alt="">
	</li>
	<li class="mix humans eye" data-alphabetic="Humain" data-numeric="7">
		<img src="img/human-eye.jpg" width="240" height="160" alt="">
	</li>
</ul>

Notez bien que la classe « .mix » est associée à tous les items de liste, ensuite chaque item possède des classes complémentaires permettant de regrouper les contenus. (trees, animals, humans, etc.)
Les attributs HTML5 data-alphabetic et data-numeric sont des attributs personnalisés que je donne en guise d’exemple et qui permettront d’ordonner les items suivants des filtres précis.

Nous ajoutons donc l’appel à la bibliothèque jQuery, puis au plugin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>

J’ai bêtement testé avec la version 2.0 de jQuery, mais ce script est probablement compatible avec d’autres versions.
Ces deux scripts sont à placer au plus proche de la balise de cloture </body>

Ensuite nous allons mettre un peu de JS pour afficher des filtres et quelques commandes pour trier notre galerie. Ajoutez ce code après les deux appels JS précédents :

<script type="text/javascript">
 
$(function(){
	// on ajoute une classe "js" sur body
	$('body').addClass('js');
 
	/* 
		Ici nous placerons les portions
		de code JS qui vont suivre.
	*/
 
});
</script>

Entrez ce code JS (à l’emplacement du commentaire précédent) afin d’insérer les filtres de notre galerie :

$('h2:first').before('<div class="filters">'+
	'<div class="col">'+
		'<h2>Filtres</h2>'
		+
		'<ul>'+
			'<li><button type="button" class="filter" data-filter="trees">Arbres</button></li>'+
			'<li><button type="button" class="filter" data-filter="eyes">Yeux</button></li>'+
			'<li><button type="button" class="filter" data-filter="animals">Animaux</button></li>'+
			'<li><button type="button" class="filter" data-filter="humans">Humain</button></li>'+
			'<li><button type="button" class="filter all"  data-filter="mix">Toutes</button></li>'+
		'</ul>'+
	'</div>'
	+
	'<div class="col">'+
		'<h2>Ordonner par</h2>'+
		'<ul>'+
			'<li><button type="button" class="sort" data-sort="data-alphabetic" data-order="desc">Lettre Desc.</button></li>'+
			'<li><button type="button" class="sort" data-sort="data-alphabetic" data-order="asc">Lettre Asc.</button></li>'+
			'<li><button type="button" class="sort line" data-sort="data-numeric" data-order="desc">Numérique Desc.</button></li>'+
			'<li><button type="button" class="sort" data-sort="data-numeric" data-order="asc">Numérique Asc.</button></li>'+
			'<li><button type="button" class="sort line active" data-sort="default" data-order="asc">Normal</button></li>'+
			// apparition dans le DOM, desc = inverse du DOM 
			'<li><button type="button" class="sort" data-sort="random">Aléatoire</button></li>'+
		'</ul>'+
	'</div>'+
'</div>');

Nous utilisons la concaténation (symbole « + ») dans le code JS pour conserver une certaine indentation qui permet de faciliter la lecture du code.

Notez sur le premier gros bloc, que ces filtres sont associés aux classes de nos items de galerie. L’attribut personnalisé data-filter prend comme information l’un des groupes mentionné précédemment comme une classe d’items de galerie (trees, animals, etc.)
Le deuxième gros bloc regroupe les filtres alphabétiques et numériques, et prennent comme valeur le nom de l’attribut personnalisé des items de galerie. (un peu complexe comme cheminement, je vous l’accorde).

Enfin, pour initialiser le plugin, il faut ajouter à la suite de notre JS, ce petit bout de code :

$('#grid').mixitup({
	effects: ['fade','scale','rotateZ'],
});

Ici avec les options utilisées sur la démo de l’article.

Il nous faut insérer un peu de CSS pour que les animations fonctionnent bien, CSS que nous n’appliquerons que si JS est activé.
Cela tombe bien puisque nous ajoutons une classe « js » lorsque notre code JS précédent est fonctionnel.

.js #grid li {
	display: none;
	opacity: 0;
}

Placez ce code dans votre feuille de styles principale si vous le souhaitez :)

Pour ceux qui le souhaitent, voici quelques styles pour les boutons de filtre, mais à vous d’adapter bien entendu.

.filters li {
	display: inline;
}
.filters button {
	display: inline-block;
	margin: 3px 3px 0 0;
	padding: 3px 10px;
	border: 1px solid #ddd;
	background: #eee;
	cursor: pointer;
}
.filters button:focus {
	border: 1px dashed #1591E0;
	outline: 0 none;
}
.filters button.all {
	background: #ddd;
}
.filters button.active {
	color: #f2f2f2;
	border-color: #1591e0;
	background: #1591e0;
}

Qu’avons nous produit ?

Avec ce procédé nous avons amélioré l’expérience utilisateur pour une partie des utilisateurs que l’on a tendance à facilement oublier, soit parce qu’on n’en a pas conscience, soit parce qu’on est développeur fainéant ;) :

  • les personnes qui naviguent sans JS n’ont pas d’éléments perturbants (liste de filtres inactifs), ils bénéficient juste d’une simple galerie
  • les personnes qui naviguent au clavier ont le bénéfice du focus sur les boutons d’action
  • le focus est stylé de manière à savoir où nous nous trouvons à la navigation clavier
  • l’élément button peut porter l’attribut title qui pourra offrir une information plus importante sur l’évènement déclenché par le bouton

Bref, votre code est plus accessible et plus cohérent.
C’est cet aspect des choses que le tutoriel officiel du plugin oublie complètement.

Et voilà !
Si vous avez des questions, ça se passe plus bas ;)

Voir la démonstration

Vous voulez encourager l'auteur ?

Don PayPalflattr this!

Laissez-moi un petit mail pour que je puisse vous remercier.

21 commentaires sur “MixItUp – Plugin jQuery pour filtrer et ordonner du contenu dynamiquement”

  1. rodolpheb dit :
    24 mai 2013

    Bravo et merci

  2. 24 mai 2013

    Le résultat est vraiment superbe … je me dis qu’avec MySQL et une bonne conception Bdd il doit y avoir moyen d’inventer des interfaces vraiment innovantes sur cette base là …

  3. LuciferX dit :
    26 mai 2013

    Ha oui, très sympa, j’aime bien le rendu et pour 14ko ca a l’air de valoir le coup de se pencher sur le plugin.

    Dommage malgré tout qu’il ne soit fonctionnel sur IE qu’à partir de la version 10, du coup pas vraiment utilisable en production…

    • Geoffrey dit :
      27 mai 2013

      Bonjour,
      Le plugin est fonctionnel sur IE, seule les animations ne le sont pas :)

  4. Clément dit :
    2 juin 2013

    Bonjour,

    superbe tutoriel ! Merci à toi Geoffrey !

    Cependant, quelqu’un a-t-il réussi à l’intégrer et à la rendre dynamique sous WordPress ?

    J’ai suivi ce tutoriel : http://kune.fr/javascript/tutoriel-integreez-mixitup-a-wordpress/ mais je n’arrive pas au résultat souhaité.

    • Geoffrey dit :
      2 juin 2013

      Bonjour Clément,
      WordPress est un outil qui te permet de faire ce que tu veux avec les données que tu rentres depuis l’interface d’administration. C’est donc le thème qui détermine le mode d’affichage des données.
      En suivant le tutoriel que tu cites, tu as dû rentrer des problèmes, le mieux serait de préciser au créateur du tutoriel en question où tu as bloqué pour qu’il puisse adapter son texte.
      Moi je ne peux rien pour cet auteur ou son article :)

      D’ailleurs partir d’un thème tout fait utilisant un système « concurrent » pour y incorporer MixItUp, je trouve la démarche bancale et risquée…

      Bon courage à toi.

  5. Clément dit :
    3 juin 2013

    Bonjour,

    merci pour ta réponse. En fait, j’ai réussi. Du coup je n’ai pas eu besoin de demander de l’aide à l’auteur du tutoriel.

    Et non, je ne pars pas d’un thème tout fait. :p Je crée mon propre thème. :)

    • Geoffrey dit :
      3 juin 2013

      Ah c’est cool ça ! :)
      Pour le thème je parlais de la démarche de l’auteur, partir d’un thème vierge me semble plus cohérent en effet.
      Bonne continuation.

  6. Christophe dit :
    7 septembre 2013

    Salut Geoffrey,

    très bon tutoriel!
    C’est dans l’esprit du thème que j’aimerai inclure sur mon site mais j’ai juste deux petite questions.
    Y a t il la possibilité de définir le nombre de photo que l’on peut voir sur une ligne, ou alors de le faire uniquement horizontale sur toute la largeur de la page ?
    D’autre part, y a t il possibilité de cliquer sur la photo pour l’afficher en plus grand ?

    Merci!!!!

    • Geoffrey dit :
      8 septembre 2013

      Salut Christophe,

      Très belles photos sur ton site web !

      Concernant les possibilités que tu évoques, c’est en dehors du cadre du plugin que ça se passe. Il s’agit là de CSS et de mise en page principalement :

      • quelle sera la largeur de ton site ou du conteneur de ces miniatures ?
      • dois-tu prévoir d’avoir toujours le même nombre de photos sur la ligne quelle que soit la largeur disponible d’affichage ?
      • enfin pour l’affichage en plus grand, il va falloir coupler ce plugin à un de type lightbox tel que ColorBox ou équivalent.

      MixItUp est vraiment là pour appliquer des sortes de filtres dynamiques et ranger tes miniatures correctement (en gros). Le reste c’est à toi de l’ajouter :)
      J’espère avoir répondu à tes questions (en t’en posant d’autres, j’avoue c’est pas réglo :p)

  7. Christophe dit :
    8 septembre 2013

    Merci Geoffrey,

    Pour un affichage type lightbox, je ne pense pas avoir de soucis pour le rajouter, mais je pensais qu’il y en avait la possibilité des le départ.

    Le site restera comme il est actuellement, je pense simplement rajouter un conteneur de 1000 pixels de large, ou bien d’utiliser toute la largeur de l’écran si c’est possible. (qui se redimensionne automatiquement selon la taille de la fenêtre, écran, …
    Il n’est pas nécessaire d’avoir toujours le même nombre d’images sur une ligne selon la largeur disponible d’affichage.

    • Geoffrey dit :
      8 septembre 2013

      Quelle que soit la largeur nécessaire, il te suffit de définir la place que prend chacun des items pour limiter en nombre ces items sur une seule ligne (si chacun fait 25% de largeur, tu en aura 4 sur la même ligne). Ensuite à toi de détermine comment se comporte cette ligne en redimensionnant la fenêtre. (soit tu as des largeurs fixes en px, soit relatives en %, le comportement ne sera pas le même)
      Dans mon exemple ce sont les images qui définissent la largeur de chaque item. Ici c’est fixe, donc en redimensionnant la fenêtre le nombre d’item par ligne va varier :)

  8. Yann dit :
    9 septembre 2013

    Très bon tuto et présentation de ce plugin !

    J’aurai aimé l’ajouter mais pour les effets j’aurai voulu savoir si c’était possible de ne pas faire disparaître les éléments lors du tri. Juste diminuer leurs opacités !

    Merci en tout cas :)
    Yann

    • Geoffrey dit :
      9 septembre 2013

      Bonjour,

      Je pense que c’est possible avec un peu de CSS, voire directement avec les effets proposés par le plugin.
      La documentation est assez bien fichue à ce sujet.
      Bonne journée :)

  9. Christophe dit :
    14 septembre 2013

    Salut Geoffrey,

    j’essaie de rajouter un petit titre sur les photos mais je ne suis pas certain d’avoir compris comment procéder. J’ai uploadé rapidement ce que j’ai modifié pour le moment
    http://christophehassel.com/files/MixItUp.html

    Il me faudrait un titre comme sur cet exemple http://mixitup.io

  10. Christophe dit :
    14 septembre 2013

    D’autre part, je n’ai pas réussi à écrire « Val d’Isère » dans les filtres mais « ValdIsère » en raison de l’apostrophe. Y a t il possibilité d’utiliser l’apostrophe d’une façon ou d’une autre ?

  11. Christophe dit :
    15 septembre 2013

    Tu peux oublier mon commentaire sur les Titres, j’ai abandonné l’idée, je rajouterai un titre ou commentaire sur l’image une fois cliqué (lightbox, …).

    • Geoffrey dit :
      15 septembre 2013

      Bonjour Christophe.
      Pour le filtre il te faut échapper l’apostrophe de la sorte :
      val d\'isère
      En effet la chaîne est déclarée entre simple-quotes (apostrophes), du coup à chaque apparition de ce caractère dans la chaîne il faut l’échapper.

      Concernant le titre, il ne faut pas abandonner ses idées.
      Concrètement dans les éléments <li> tu n’es pas obligé de rester avec une image seule.
      Ajoutes par exemple ceci :

      <p class="img-title">Le titre</p>

      Juste avant chaque image, et dans le CSS tu fais à peu près :

      .js #grid li {
          position: relative;
      }
      .js .img-title {
          color: white;
          left: 10px;
          margin: 0;
          position: absolute;
          text-shadow: 0 0 4px #000000;
          top: 10px;
      }

      Cela devrait suffire pour la base :)
      Bonne continuation.

  12. Christophe dit :
    16 septembre 2013

    Merci beaucoup! Tu as réponse a tout!

  13. Ha dit :
    28 juin 2014

    Bonjour, j’ai bien suivi toutes les étapes, et impossible de faire fonctionner ce Plugin. Firefox 30.0.

Laisser un commentaire

Certains codes HTML ne sont pas échappés automatiquement. Pour afficher du code dans votre commentaire, merci d'échapper vos chevrons en utilisant "&lt;" et "&gt;" en lieu et place de "<"" et ">".

Il est difficile de proposer un support pour tous les articles de ce blog. En ne fournissant pas un moyen de consulter votre code bogué, vous vous assurez de ne pas avoir de réponse adaptée. Utilisez CodePen.io à défaut d'une page web.

 
Le studio web