Comment créer un effet de lightbox avec JavaScript?
19/03/2024
•
5
min
Créer un effet de lightbox en utilisant JavaScript implique trois parties principales : la structure HTML, le style CSS, et la fonctionnalité JavaScript. Voici comment procéder étape par étape:
Étape 1 : Créer une structure HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<img id="main-image" src="image.jpg" alt="image échantillon">
<div id="lightbox-container" onclick="closeLightbox()">
<img id="lightbox-image">
</div>
<script src="lightbox.js"></script>
</body>
</html>
Dans votre HTML, vous aurez une image avec l'id "main-image" qui lorsqu'elle est cliquée invoquera l'effet lightbox. Le div "lightbox-container" couvrira tout le viewport et contiendra "lightbox-image" qui affichera l'image cliquée dans la lightbox.
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Étape 2 : Appliquer le style CSS
Vous devriez maintenant ajouter le CSS dans votre fichier styles.css. Voici un exemple simple:
#lightbox-container {
display: none;
position: fixed;
z-index: 9999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
#lightbox-image {
max-width: 80%;
max-height: 80%;
margin: 20px auto;
border: 8px solid white;
box-shadow: 0px 0px 50px #111;
border-radius: 4px;
}
Dans ce CSS, "#lightbox-container" est réglé pour couvrir l'ensemble du viewport du navigateur et a un fond semi-transparent. L'image "#lightbox-image" est centrée et stylisée avec une bordure, une ombre portée, et un arrondi de bordure pour la présentation.
Étape 3 : Implémenter la fonctionnalité JavaScript
Ensuite, insérez le script JavaScript suivant dans votre fichier lightbox.js :
document.getElementById('main-image').addEventListener('click', openLightbox);
function openLightbox() {
var imgSrc = document.getElementById('main-image').getAttribute('src');
document.getElementById('lightbox-image').setAttribute('src', imgSrc);
document.getElementById('lightbox-container').style.display = "block";
}
function closeLightbox() {
document.getElementById('lightbox-container').style.display = "none";
}
Dans ce script, la fonction 'openLightbox' est appelée lorsque l'image principale est cliquée. Elle récupère l'attribut 'src' de l'image cliquée et le définit comme le 'src' de l'image de la lightbox. Elle affiche ensuite la lightbox.
La fonction 'closeLightbox' est appelée lorsque l'utilisateur clique n'importe où sur la lightbox, définissant ainsi l'affichage du conteneur de la lightbox sur 'none', ce qui le cache efficacement.
C'est tout ! Votre lightbox devrait maintenant fonctionner. L'HTML fournit la structure, le CSS ajoute la disposition et les styles, et le JavaScript vous donne l'interaction.
N'oubliez pas, c'est une fonctionnalité de lightbox très basique. Pour des implémentations plus complexes (affichage d'une série d'images, ajout de flèches de navigation, etc.), vous pourriez envisager d'utiliser une bibliothèque de lightbox en JavaScript, ou un composant de lightbox d'un framework (comme le modal de Bootstrap).
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.