Créer un filtre pour trier des projets dans votre portfolio
ERROR
00:00
00:00

Tuto Créer un filtre pour trier des projets dans votre portfolio

Adrien Gazaix
3,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto Jquery en vidéo, nous verrons comment créer un système de filtres pour laisser la possibilité à l'internaute qui visite votre site de trier vos travaux ou vos projets en fonction de leurs catégories. Nous partirons donc sur un portfolio qui contiendrait 2 catégories : Graphisme & Web.

Déroulement du tuto Filtres en jQuery :

  • Résultat du tuto
  • Insertion des images en HTML
  • Création des liens sur ces images
  • Mise en place des images grâce au Boostrap de twitter
  • Créer notre menu en HTML avec les différentes catégories de filtre
  • Changer l'opacité de nos images au survol de la souris
  • Créer l'action sur le click de nos filtres
  • Tester pas à pas le système de filtre
  • Télécharger et lier le script lightbox à notre page HTML
  • Ajouter une fonction dans notre fichier JS pour que, au click, l'image s'ouvre en plus grand

Tout est fourni dans les sources pour que vous puissiez reproduire le système de filtres sur votre portfolio. Le code jQuery est commenté à chaque ligne pour se repérer plus facilement.
Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer un filtre pour trier des projets dans votre portfolio

Plan détaillé du cours

Leçon 1Créer un filtre pour trier des projets dans votre portfolio
35m43s

Aperçus

Avis des apprenants

Détail des avis
197
Apprenants
8
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
Jmch73
Jmch73
Publié le 08/12/2015
encore un tuto extra, merci encore....
Adrien Gazaix
Adrien Gazaix
De rien ;)
Mylène Boyrie
Mylène Boyrie
Publié le 08/03/2012
Très clair est efficace, merci. Petite question ela dit : Si un de mes filtres possède un accent (par exemple Rédaction), il y aura un problème sur le lien avec la class CSS (qui ne peut pas contenir d'accent). Une astuce pour régler ce problème ?
Tailivan
Tailivan
Publié le 18/02/2012
Encore un Tuto super.... Avec des explications claires et précises... je le conseille ! José

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

jQuery

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1452 tutos gratuits

Notre politique de protection des données