10 Exercices pratiques pour vous améliorer en jQuery
-31% de réduction
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 !
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Simple, rapide et efficace... Fonctionne parfaitement bien ! Merci à l'auteur ! Je recommande...
-
Bon tuto, avec des explications très claires
-
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 ?
-
Avec quelle version de logiciel ce tuto est-il compatible ?jQuery
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés