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
Redirection avec compte à…
Dans ce tuto jQuery en vidéo nous verrons comment mettre en…
Créer un accordéon horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
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…
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 certifié
Salut à tous !
Je m'apelle Adrien j’ai 28 ans et je suis Webdesigner spécialiste WordPress depuis plus de 6 ans. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant plus de 3 ans et depuis 1 an et demi 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
extrêmement complet ! très pédagogique ! Top !
Je trouve très intéressante votre vidéo sur la création d'un site OnePage. Je l'ai vu plusieurs fois et vais me lancer bientôt dans la création d'un site en m'inspirant de vos idées. Pour le reste "Jquery, css, ...) cela ne me fait plus peur . Merci.
Du très bon travail ! Encore merci pour ces formations nécessaires à mon apprentissage dans le graphisme.
Tutos simples et efficaces !
Vraiment très agréable à suivre. J'ai beaucoup aimé.
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 (12 votes)
Les avis / Questions des utilisateurs (31)
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é 226 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.
Choisissez parmi tuto classés dans nos 236 logiciels ou langages informatiques.
(a acheté ce tuto - 12 septembre 2012)
" Très bon tuto, facile à suivre et très facilement applicable. "
(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 "
(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. "
(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. "
(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. "
(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. "
(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 ! "
(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 "
(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 ! "