3 Crédits +d'infos

Tuto Créer une lightbox simplement avec jQuery


3 Crédits +d'infos
  • Téléchargement et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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 842 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com

Voir les autres formations de Adrien Gazaix

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

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