Création d'une Lightbox avec Fancybox

Une lightbox
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML5 et CSS3 / Part 4
Revoir le teaser Je m'abonne
4,5
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis
4,5
59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Les objectifs de cette leçon sont :
1. Télécharger et intégrer la librairie Fancybox.
2. Organiser les images dans la page HTML.
3. Initialiser Fancybox avec du code JavaScript.
4. Personnaliser les effets de la lightbox.

Découvrez comment créer une lightbox en utilisant la librairie Fancybox.

Dans cette leçon, nous expliquons comment réaliser une lightbox avec la librairie Fancybox. Cette librairie permet de créer des galeries d'images interactives avec des effets de transition élégants. Nous commencerons par télécharger et intégrer les fichiers nécessaires, tels que jQuery, jQuery-mousewheel, et les fichiers fancybox.js et fancybox.css. Ensuite, nous organiserons nos images dans notre page HTML en utilisant des liens et des attributs spécifiques comme rel et title. Enfin, nous écrirons un script JavaScript pour initialiser Fancybox et personnaliser les effets d'ouverture et de style de l'arrière-plan de la lightbox.

Ce tutoriel est parfait pour ceux qui souhaitent ajouter des galeries d'images interactives et élégantes à leurs sites web.

Voir plus
Questions réponses
Quel est le rôle de la librairie jQuery dans ce tutoriel ?
La librairie jQuery est utilisée comme dépendance nécessaire pour le fonctionnement de Fancybox.
Pourquoi utilise-t-on l'attribut 'rel' avec les images ?
L'attribut 'rel' permet de grouper les images pour créer un diaporama, permettant ainsi la navigation entre elles sans fermer la lightbox.
Comment personnaliser l'effet d'ouverture de la lightbox ?
L'effet d'ouverture de la lightbox peut être personnalisé en passant des paramètres tels que 'openEffect' dans la fonction de configuration de Fancybox.

Programme détaillé

2 commentaires
4,5
2 votes
5
4
3
2
1
Azraël
Il y a 3 ans
Bonne formation.
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
lyazid.meaux
Il y a 4 ans
Très bonne formation, juste ce qu'il faut.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.

Merci.