CATALOGUE Code & Data Formation Ajax/jQuery Apprendre Ajax / JQuery Créer une Lightbox avec jQuery

Créer une Lightbox avec jQuery

Mise en application de le Lightbox avec Ajax / jQuery
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Ajax / JQuery
Revoir le teaser Je m'abonne
5,0
Transcription
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
5,0
Cette leçon fait partie de la formation
59,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à la Lightbox

Objectifs

Les objectifs de cette vidéo sont de :

  • Créer une lightbox pour afficher des images dans un pop-up.
  • Apprendre à manipuler le DOM avec jQuery.
  • Appliquer des styles CSS pour centrer des éléments.

Résumé

Ce tutoriel montre comment convertir un slideshow en lightbox avec jQuery.

Description

Dans ce tutoriel, nous allons apprendre à transformer un slideshow existant en une lightbox. Nous allons créer des éléments HTML supplémentaires, ajouter des styles CSS pour centrer la lightbox, et utiliser des fonctions jQuery pour manipuler le DOM.

Nous créerons deux nouveaux éléments : un pour le fond opaque et un pour afficher les images centrées. Nous leur attribuerons des styles appropriés pour les rendre invisibles au début, puis appliquerons des propriétés CSS telles qu'une largeur et une hauteur de 100%, un z-index de 10 pour le fond opaque et de 11 pour la zone d'affichage, ainsi qu'une opacité de 50% pour le fond.

Nous ajouterons également des interrupteurs pour ouvrir et fermer la lightbox. Lors de l'ouverture, les propriétés CSS seront ajustées pour centrer la zone d'affichage. Lors de la fermeture, les éléments dynamiquement créés seront supprimés, rétablissant le slideshow original dans le DOM.

Voir plus

Questions fréquentes

Quel est l'objectif principal de ce tutoriel ?
L'objectif principal est de montrer comment convertir un slideshow en lightbox en utilisant jQuery et CSS pour un effet d'opacité.
Comment centrer la lightbox sur la page ?
Pour centrer la lightbox horizontalement et verticalement, nous utilisons des propriétés CSS : position absolue, top 50%, left 50%, et des marges négatives égales à la moitié de la largeur et de la hauteur de la lightbox.
Quel est le rôle de la fonction remove en jQuery ?
La fonction remove en jQuery est utilisée pour supprimer des éléments du DOM, ce qui est utile dans notre tutoriel pour enlever les éléments dynamiques lorsque l'utilisateur ferme la lightbox.

Programme détaillé

1 commentaire
5,0
1 vote
5
4
3
2
1
zohor.souhila
Il y a 3 ans
Excellente formation!