Créer une lightbox simplement
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer une lightbox simplement

Adrien Gazaix
3,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer une lightbox simplement

Plan détaillé du cours

Leçon 1Créer une lightbox simplement
40m28s

Aperçus

Avis des apprenants

Détail des avis
356
Apprenants
20
Commentaires
4,9/5
Note moyenne
5/5
13
4/5
2
3/5
0
2/5
0
1/5
0
Membre-9401-2400
Membre-9401-2400
Publié le 25/03/2017
Simple, rapide et efficace... Fonctionne parfaitement bien ! Merci à l'auteur ! Je recommande...
Adrien Gazaix
Adrien Gazaix
Merci à toi, tu pourras maintenant sublimer tes photos sur ton site ;) A bientôt pour de prochains tuto !
Cantegrel
Cantegrel
Publié le 27/10/2015
Bon tuto, avec des explications très claires
Marie Meunier
Marie Meunier
Publié 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 ?

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

jQuery

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données