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

Redirection avec compte à rebours en JqueryRedirection avec compte à…
Dans ce tuto jQuery en vidéo nous verrons comment mettre en…

Créer un accordéon horizontal pour vos derniers articlesCréer un accordéon horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Créer un Sticky menu qui reste visible à tout instantCré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 pour dévoiler un contenuAnimer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…

Créer un site web avec un slider d'images en full pageCréer un site web avec un…
Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas,…

Créer un slider et l'intégrer à votre blog WordpressCré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 animé pour votre site webCréer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…

Ajouter une bulle d'info enrichie à votre siteAjouter 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 :

Partagez cet extrait

Lien vers cet extrait : Embed code :

spykrew07 , formateur certifié

Salut à tous ! Je m'apelle Adrien j’ai 29 ans et je suis Webdesigner spécialiste WordPress depuis 7 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 4 ans et depuis 3 ans je me suis lancé en freelance. Formateur certifié sur tuto.com, je partage mes connaissances et mes découvertes dans différents domaines : web design, logo, html, wordpress, php, css jquery ... Ma devise : Webdesign is not a job, it’s a passion !

Toutes les formations de Spykrew07


Témoignage des clients de spykrew07

Très belle vidéo, et la voix donne envie d'écouter, ce n'est pas le cas avec d'autres personnes ... Merci de m'avoir aidé :)

Je trouve que Spykrew07 est un très bon formateur !

Très bon formateur !!!

tutos clair et précis!

Très bien, de bonnes explications très précises. Un bon rythme pendant les tutos

Lire les autres témoignages

 

D'autres tuto de spykrew07

Processus de création d'un logo et de ses déclinaisonsProcessus 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 JSCré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+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)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…

voir tous les tuto de spykrew07

Notes attribuées par les utilisateurs (13 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (32)

par petitemarizettea voté :
(a acheté ce tuto - 21 mars 2014)

" Super !
Très intéressant, une fois de plus...
J'aurais voulu la même chose mais avec plusieurs images contenues dans le lightbox, avec une petite flèche à gauche et à droite...
Il y aura cela bientôt ? "

par lolodena voté :
(a acheté ce tuto - 12 septembre 2012)

" Très bon tuto, facile à suivre et très facilement applicable. "

par Grafittia voté :
(a acheté ce tuto - 16 août 2012)

" Merci pour la réponse. Avant de trouver ton tuto, j'avais déjà regardé ces différents plug in mais je n'arrivais pas à faire ce que je voulais.
Je n'ai pas envie de tout recommencer, ton tuto est nickel ; ça a marché du premier coup. Donc, je laisse comme c'est et j'attendrai ....
Merci "

par spykrew07
(auteur de ce tuto - 14 août 2012)

" @Grafitti Je ne sais pas du tout quand je ferai une suite. Ce que je peux te conseiller si tu veux une lightbox plus complète rapidement c'est de télécharger un plugin comme Lightbox ou FancyBox qui sont très bien et tu auras la pagination entre les images. Bon courage, et si tu galère à installer ce plugin envoi moi un email, je t'aiderai à le mettre en place. "

par Grafittia voté :
(a acheté ce tuto - 14 août 2012)

" Bonjour,
J'attends toujours avec impatience la suite de la lightbox !
Comment passer d'une photo à une autre ?????
Merci. "

par spykrew07
(auteur de ce tuto - 12 juin 2012)

" @aiborion Les images utilisées ne m'appartiennent pas c'est donc normal de ne pas les mettre dans les sources. "

par aiboriona voté :
(a acheté ce tuto - 11 juin 2012)

" @spykrew07: il manque les images. Sinon niveau source il serait intéressant d'avoir un répertoire avec le résultat et l'état initial pour commencer le tuto. La j'ai dû supprimer les bonnes lignes, donc faire attention de quoi tu partais dans ta vidéo pour suivre pas à pas le code que tu écris. "

par spykrew07
(auteur de ce tuto - 11 juin 2012)

" @aiborion Je fais toujours une préparation pour mes tutoriels, donc je mets souvent les sources de celle-ci plutôt que ce que nous faisons ensemble dans la vidéo. Mais normalement c'est le même contenu, qu'est ce qu'il manque des les sources ? Merci pour ton achat ! "

par aiboriona voté :
(a acheté ce tuto - 11 juin 2012)

" On a pas les bons fichiers sources dès le début mais l'animateur est bon dans ces explications "

par spykrew07
(auteur de ce tuto - 13 avril 2012)

" @BLONDIN Merci à toi ;) "

par BLONDINa voté :
(a acheté ce tuto - 13 avril 2012)

" Absolument génial !!!
Merci pour tes tutos qui sont toujours excellent.
Ben. "

par shagga voté :
(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... "

par Grafittia voté :
(a acheté ce tuto - 16 février 2012)

" Un grand merci ! J'attends la suite avec beaucoup d'impatience .... "

par spykrew07
(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 ;) "

par Grafittia voté :
(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 ! "

par spykrew07
(auteur de ce tuto - 10 février 2012)

" @chouchou59 Merci !! A bientôt pour un prochain tuto jQuery ! "

par chouchou59a voté :
(a acheté ce tuto - 10 février 2012)

" Toujours aussi parfait ... "

par Grafittia voté :
(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 ! "

par adoumedia
(a acheté ce tuto - 08 février 2012)

" bonjour

je viens même d'essayer sur IE9 pas d’affichage des images "

par spykrew07
(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 ! "

par adoumedia
(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 "

par spykrew07
(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. "

par adoumedia
(a acheté ce tuto - 07 février 2012)

" oups c'est pas sur ie7 mais IE8 que cela ne fonctionne pas ? "

par adoumedia
(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 "

par lottaviania voté :
(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! "

par vellaya voté :
(a acheté ce tuto - 24 décembre 2011)

" rtes bien "

par girondav33a voté :
(a acheté ce tuto - 12 décembre 2011)

" très bon tuto ! "

par salvaa voté :
(a acheté ce tuto - 03 décembre 2011)

" Bon tutoriel "

par doudou92a voté :
(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. "

par spykrew07
(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. "

par jfgrimard
(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 "

par pbsla voté :
(a acheté ce tuto - 28 novembre 2011)

" Toujours des tutos très clairs ! "

 

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é 269 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 27 novembre 2011 par spykrew07, formateur certifié par Tuto.com, ayant reçu une note moyenne de 4,8/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.

N'hésitez pas à nous contacter si vous avez la moindre question !