[Résolu] Problème avec ma lightbox

salut,

pour ma nouvelle version de site, j'ai fait une lightbox avec l'aide de notre ami chatgpt pour la partie javascript car je suis une bille en javascript .

la lightbox fonctionne, eelle s'ouvre comme je veux mais il me reste un problème :
- ma lightbox se ferme correctement si je clique sur le bouton fermer, mais je n'arrive pas à la faire se fermer aussi si je clique à côté de l'image qui y est affichée.

voici les codes :

.thumbnail {
                        cursor: pointer;
                        display: block;
                        margin: 0 auto;
                        position: relative;
                        transition: 0.3s;
                    }

                    .thumbnail:hover {
                        opacity: 0.7;
                    }

                    .lightbox {
                        background-color: rgba(0, 0, 0, 0.9);
                        display: none;
                        height: 100%;
                        left: 0;
                        overflow: auto;
                        position: fixed;
                        text-align: center;
                        top: 0;
                        width: 100%;
                        z-index: 9999;
                    }

                    .lightbox-content {
                        align-items: center;
                        display: flex;
                        height: 100%;
                        justify-content: center;
                    }

                    .lightbox-content img {
                        margin: auto;
                        max-height: 90vh;
                        max-width: 100%;
                    }

                    .close {
                        color: white;
                        font-size: 40px;
                        font-weight: bold;
                        position: absolute;
                        right: 35px;
                        top: 15px;
                        transition: 0.3s;
                    }

                    .close:hover, .close:focus {
                        color: #bbb;
                        cursor: pointer;
                        text-decoration: none;
                    }

document.addEventListener("DOMContentLoaded", () => {
                        const lightboxImages = document.querySelectorAll('[data-lightbox]');
                        const lightbox = document.getElementById('lightbox');
                        const closeButton = document.querySelector('.close');
                        const lightboxImg = document.getElementById('lightbox-img');

                        lightboxImages.forEach(image => {
                            image.addEventListener('click', () => {
                                openLightbox(image);
                            });
                        });

                        closeButton.addEventListener('click', closeLightbox);

                        window.addEventListener('click', (event) => {
                            if (event.target === lightbox) {
                                closeLightbox();
                            }
                        });

                        lightboxImg.addEventListener('click', (event) => {
                            event.stopPropagation();
                        });
                    });

                    function openLightbox(element) {
                        document.getElementById('lightbox-img').src = element.src;
                        document.getElementById('lightbox').style.display = 'block';
                    }

                    function closeLightbox() {
                        document.getElementById('lightbox').style.display = 'none';
                    }

<div class="userstyles"><span id="letter-a"></span>
                    <div>
                        <h2 class="center">
                            <a href="https://forum.alsacreations.com/" target="_blank"><img src="/static/images/userstyles/alsacreations.jpg" alt="Alsacréations"></a>Alsacréations Forum responsive
                        </h2>
                        <img src="https://gitlab.com/breatfr/alsacreations-forum-responsive/-/raw/main/docs/preview.jpg" class="center thumbnail" alt="aperçu" data-lightbox>
                        <p><span class="bold">Description :</span> Le forum d'Alsacréations est mieux adapté aux écrans larges.</p>
                        <p class="install-links"><span class="bold">Liens d'installation :</span>
                            <a href="https://gitlab.com/breatfr/alsacreations-forum-responsive" class="externalicon" target="_blank">GitLab</a>
                            <a href="https://greasyfork.org/scripts/496830" class="externalicon" target="_blank">Greasy Fork</a>
                            <a href="https://userstyles.world/style/16561/" class="externalicon" target="_blank">UserStyles.world</a>
                        </p>
                    </div>
                </div>

                <div id="lightbox" class="lightbox">
                    <span class="cursor close">&times;</span>
                    <div class="lightbox-content">
                        <img id="lightbox-img" src="" alt="">
                    </div>
                </div>

j'espère que quelqu'un pourra m'aider.

- edit -
bon finalement, j'ai trouvé merci
Modifié par Breat (08 Jun 2024 - 03:51)