3 Crédits +d'infos

Tuto Créer une lightbox simplement avec jQuery


3 Crédits +d'infos

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 !


Formateur : Adrien Gazaix

Adrien Gazaix a publié 74 tutoriels et obtenu une note moyenne de 4,8/5 sur 17 471 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com

Voir les autres formations de Adrien Gazaix

  • 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 ?
    petitemarizette, 21/03/2014
  • Très bon tuto, facile à suivre et très facilement applicable.
    loloden, 12/09/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
    Grafitti, 16/08/2012

  • Quel est le niveau requis pour suivre ce tuto ?
    débutant