Tuto publié par 
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 !
Jetez un oeil à ces autres tuto jQuery 1.7
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Animer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…
Mettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…
Mettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…
Créer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…
Créer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…
Créer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…
Créer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7 de 35 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, Formateur
Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !
En savoir plus sur spykrew07
Témoignage des clients de spykrew07
Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!
Des tuto sympa mais parfois un peu chers.
Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.
Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES
je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci
Lire les autres témoignages
D'autres tuto de spykrew07
Apprenez les Bases de la 3D sur Illustrator
Dans ce tuto Illustrator en vidéo, nous allons voir ensemble comment créer à partir…
Créer une lightbox simplement
Dans ce tuto Jquery en vidéo, nous verrons comment créer une lightbox pour vos images.…
Processus de création d'un logo et de ses déclinaisons
Dans ce tuto Illustrator en vidéo, nous allons voir ensemble comment créer un logo…
Créer un système d'onglets en restant accessible sans JS
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer un système d'onglets…
Notes attribuées par les utilisateurs (6 votes)
Les avis / Questions des utilisateurs (11)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery 1.7 d’une durée de 35 minutes a été acheté 63 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 1 décembre 2011 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery Navigation.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi 24011 tuto classés dans nos 201 logiciels ou langages informatiques.
(auteur de ce tuto - 09 mars 2012)
" @Hoppipolla Thx miss ;) Réponse à ta question envoyée sur Twitter ! "
(a acheté ce tuto - 08 mars 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 ? "
(a acheté ce tuto - 18 février 2012)
" Encore un Tuto super....
Avec des explications claires et précises...
je le conseille !
José "
(a acheté ce tuto - 17 février 2012)
" Merci pour cet excellent tuto ... "
(a acheté ce tuto - 07 février 2012)
" Nickel !
Bravo pour l'ensemble thématique jquery!
Juste pour info, est-ce que d'autres tutos jquery sont prévus ? (On ne s'en lasse pas...)
A . "
(a acheté ce tuto - 02 janvier 2012)
" C'est tout à fait ça ! Merci beaucoup pour l'astuce !! "
(auteur de ce tuto - 02 janvier 2012)
" @Pumbostar Pour Tooltipsy, c'est ultra simple mais il faut le savoir. Il suffit de mettre ta classe .ico-reseaux en position:absolute plutôt qu'en fixed, et le tour est joué ;) "
(a acheté ce tuto - 02 janvier 2012)
" Bonjour.
Je me tourne vers toi car j'ai intégré ce système de filtre à une site créé via ta formation complète : http://fr.tuto.com/jquery/creer-un-site-web-avec-un-slider-d-images-en-full-page-jquery-css,24011.html
En fait, j'ai un problème d'affichage. Lorsque la liste s'adapte à la taille de la div "content", et qu'une image passe à la ligne, elle fait sauter l'affichage. En effet, on ne peut plus scroller jusqu'en bas.
Pour que ce soit plus clair , voici l'exemple : http://thomasdemoura.fr/DEV/index.html
PS : si tu comprends pourquoi le plugin "Tooltipsy" ne fonctionne pas, je suis preneur. :)
Merci de ton aide.
"
(auteur de ce tuto - 02 décembre 2011)
" @Olivier75009 Oui je n'ai pas mis les images de la catégorie Graphisme car ce sont des images qui proviennent du site Desktopography et qui ne m'appartiennent donc pas. Pour le décompte c'est vrai que c'est une bonne idée ;) "
(a acheté ce tuto - 02 décembre 2011)
" Pas mal; il manque quelques photos dans les fichiers sources. Cependant, il aurait été judicieux via js de faire un décompte des images par classe afin que la lightbox prenne en charge le nombre d'images restant à afficher dans la catégorie. "
(a acheté ce tuto - 01 décembre 2011)
" Parfait ! merci ! "