Tuto publié par 
Dans ce tuto Jquery en vidéo, nous verrons comment créer une lightbox pour vos images. Une lightbox, si vous ne le savez pas, est une popup qui s'ouvre lorsque l'on clique sur une image pour la voir en plus grand. En quelques lignes de code, nous arriverons à créer ce système simplement. Bien entendu, ce n'est qu'un début de code, et le système peut être amélioré selon vos projets.
Déroulement de ce tuto Lightbox Jquery :
- Petit tour sur le résultat du tuto
- Insertion des images
- Création des liens sur ces images
- Création de la lightbox en HTML/CSS pour voir le rendu
- Lier notre fichier HTML à Jquery
- Créer et lier un fichier javascript externe
- Taper notre code Jquery dans ce fichier
- Tester pas à pas notre système
- Récupérer le title du lien dans notre lightbox
- Ajouter un effet d'apparition en fade à la lightbox
Beaucoup de scripts de Lightbox existent sur la toile aujourd'hui, mais vous saurez maintenant comment cela fonctionne, et si vous n'avez pas forcément envie d'utiliser un script assez lourd, vous pourrez créer votre propre lightbox adapté à vos besoins.
Le fichier HTML, la feuille de style CSS, et le fichier JS sont fournis dans les sources pour que vous puissiez reproduire le système de lightbox sur votre site.. Bon tuto à tous !
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 un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Ajouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…
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 40 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
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…
Créez et Personnalisez votre Page Google+
Dans ce tuto Google Plus
Apprenez les bases du HTML 2ème partie (avec un peu de CSS)
Dans ce tuto HTML, nous continuerons l'apprentissage de ce langage et nous verrons qu'il…
Notes attribuées par les utilisateurs (10 votes)
Les avis / Questions des utilisateurs (23)
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 40 minutes a été acheté 138 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 27 novembre 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 Effet.
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 - 13 avril 2012)
" @BLONDIN Merci à toi ;) "
(a acheté ce tuto - 13 avril 2012)
" Absolument génial !!!
Merci pour tes tutos qui sont toujours excellent.
Ben. "
(a acheté ce tuto - 10 mars 2012)
" Bon tuto. Intéressant, comme toujours, mais j'aurais aimé une partie qui explique aussi comment créer une navigation entre les images... "
(a acheté ce tuto - 16 février 2012)
" Un grand merci ! J'attends la suite avec beaucoup d'impatience .... "
(auteur de ce tuto - 15 février 2012)
" @Grafitti Je vais réfléchir à une suite pour ce tutoriel de Lightbox pour rajouter la fonctionnalité que tu demandes. A bientôt, et merci pour ton retour ;) "
(a acheté ce tuto - 14 février 2012)
" Bonjour,
Le tuto sur la lightbox est super. Tout fonctionne à merveille !!
Mais comment faire pour passer d'une photo à une autre à l'aide d'une petite flèche vers la droite ou vers la gauche ???
Je ne connais absolument rien en javascript.
Merci encore pour ce tuto ! "
(auteur de ce tuto - 10 février 2012)
" @chouchou59 Merci !! A bientôt pour un prochain tuto jQuery ! "
(a acheté ce tuto - 10 février 2012)
" Toujours aussi parfait ... "
(a acheté ce tuto - 08 février 2012)
" C'est super ! Mais ça ne marche pas avec IE 7 et 8.
Que faut-il faire ? Y a t-il un script à ajouter ?
J'ai créé plusieurs "lightbox" en fonction de la taille des photos, je ne sais pas si c'est la bonne façon de procéder. Je ne suis absolument pas spécialiste. Merci pour ce tuto ! "
(a acheté ce tuto - 08 février 2012)
" bonjour
je viens même d'essayer sur IE9 pas d’affichage des images "
(auteur de ce tuto - 08 février 2012)
" @adoumedia Je suis désolé de ne pas pouvoir t'aider, mais sans les fichiers c'est pas facile. Envoi moi un .zip sur contact@adriengazaix.fr avec tes fichiers, et je regarderai quand j'aurai un moment. Bye ! "
(a acheté ce tuto - 08 février 2012)
" bonjour
en déplaçant les fichiers sur plusieurs ordis j'ai essayé sous ie8 les images ne s'affichent pas ni les vignettes ni l'image en big. j'ai la croix traditionnelle à la place des images. C'est embétant car je suis en train de monter des lmight box sur mon site pour a peu prés 15 pages avec au moins 10 images par pages.
Merci "
(auteur de ce tuto - 07 février 2012)
" @adoumedia Non aucun problème de mon cote sur ie8... Juste la couleur du background qui n’apparaît pas à cause du rgba qu'il ne reconnait pas dans le css et qu'il faut remplacer par un png noir 80% répéter en x et en y. "
(a acheté ce tuto - 07 février 2012)
" oups c'est pas sur ie7 mais IE8 que cela ne fonctionne pas ? "
(a acheté ce tuto - 07 février 2012)
" j'ai fais la lightbox pas de pb sur firefox mais sur IE 7 pas de visu des vignettes et le script ne se déroule pas quand on clique sur la vignette. ceci est il du à ie7 ?
merci "
(a acheté ce tuto - 13 janvier 2012)
" Très bon tuto comme d'hab. (toute la série jquery!)
Vivement les prochains, on ne s'en lasse pas!
Clair, net et précis! "
(a acheté ce tuto - 24 décembre 2011)
" rtes bien "
(a acheté ce tuto - 12 décembre 2011)
" très bon tuto ! "
(a acheté ce tuto - 03 décembre 2011)
" Bon tutoriel "
(a acheté ce tuto - 29 novembre 2011)
" Super !
Très bon tuto, vraiment bien expliqué. Je le recommande à tous (surtout aux novices comme moi).
Merci à toi spykrew07, je vais enfin pouvoir créer mes lightbox pour mon portofolio. "
(auteur de ce tuto - 29 novembre 2011)
" @jfgrimard Non le tutoriel n'aborde pas ce point, mais libre à toi de continuer mon script pour ajouter de nouvelles fonctionnalités. Tu peux aussi utiliser des scripts tout fait si tu as besoin de quelques chose de plus complet, je voulais rester assez simple dans ce tutoriel pour que chacun comprenne et puisse créer sa propre lightbox adaptée à ses besoins. "
(n'a pas acheté ce tuto - 29 novembre 2011)
" J'aime bien le visuel. J'aimerais savoir si on peut naviguer d'une photo à l'autre avec un précédent et suivant, dans le vidéo on ne le voit pas.
Merci "
(a acheté ce tuto - 28 novembre 2011)
" Toujours des tutos très clairs ! "