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 !
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Encore un tuto extra, merci encore....
-
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 ?
-
Encore un Tuto super.... Avec des explications claires et précises... je le conseille ! José
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés