$ 3.00

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

$ 3.00

  • Une formation vidéo de 35m42s
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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 !


Formateur : Adrien Gazaix

Adrien Gazaix a publié 90 tutoriels et obtenu une note moyenne de 4,7/5 sur 23 468 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

7
avis laissés
5 étoiles
7
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de jmch73 laissé le 08/12/2015
    Encore un tuto extra, merci encore....

  • 5
    avis de Hoppipolla laissé 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 ?

  • 5
    avis de tailivan laissé le 18/02/2012
    Encore un Tuto super.... Avec des explications claires et précises... je le conseille ! José

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1560 tuto gratuits


non, je ne veux pas me former gratuitement