Lightbox simple avec jQuery

Voici un code tout simple pour réaliser un effet Lightbox dans vos galeries d'images.

CrĂ©ez un dossier nommĂ© Lightbox puis un sous-dossier img qui va contenir les images. Les vignettes seront enregistrĂ©es dans un sous-dossier Ă  img nommĂ© petites. Les grandes images seront enregistrĂ©es sous le mĂȘme nom dans un sous-dossier nommĂ© grandes.

Arborescence des images

Tout d'abord le code HTML :

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="lightbox.css">
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="lightbox.js"></script>
</head>

<body>
    <h1>Effet LightBox jQuery</h1>
    <img src="img/petites/foret.jpg" class="petite">
    <img src="img/petites/prairie.jpg" class="petite">
    <p>Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. Beaucoup de texte. </p>
    <div class="grande">
    </div>
</body>

</html>

Ensuite le code CSS lightbox.css :

.petite, .grande {
    cursor: pointer
}

.grande {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);

    display: none;
    align-items: center;
    justify-content: center;
}

.grande img {
    width: 60%;
    border: 4px white solid;
    border-radius: 5px;
}

Au dĂ©part, la boite qui va contenir la grande image est invisible avec Ă  la propriĂ©tĂ© display: none. Pour respecter le traditionnel effet Lightbox, la fenĂȘtre du navigateur sera couverte par un fond noir transparent Ă  60% avec la grande image en son centre.

Suite au clic sur une vignette, le code jQuery va insérer la grande image correspondante dans la boite .grande, puis la faire apparaitre progressivement avec la méthode .fadeIn().

Voici le code jQuery lightbox.js :

$(function () {

    $(".petite").click(function () {
        var SourcePetiteImage = $(this).attr('src');
        var SourceGrandeImage = SourcePetiteImage.replace("petites", "grandes");
        $(".grande").html("<img src='" + SourceGrandeImage + "'>");
        $(".grande").fadeIn("slow").css("display", "flex");
    });

    $(".grande").click(function () {
        $(".grande").fadeOut("fast");
    });

});

Dans un premier temps, on capte le clic sur les vignettes. Si l'utilisateur clique sur une vignette :

  • On lit la source de la vignette pour fabriquer la source de la grande image grĂące Ă  la fonction JavaScript replace()
  • jQuery insĂšre la grande image dans la boite .grande grĂące Ă  la mĂ©thode .html()
  • L'image sera centrĂ©e verticalement et horizontalement grĂące Ă  la propriĂ©tĂ© CSS display: flex

Pour terminer, si l'utilisateur clique sur la grande image ou ailleurs, la boite .grande disparait.

Voici le résultat :

lightbox jquery

Articles connexes

There are 5 comments for this article
  1. laurent at 1:51

    Bonjour,
    Merci pour ce code ! Formidablement simple et compréhensible.
    Une question : si la lighbox est dans un iframe, comment faire pour que l'image s'affiche en plein Ă©cran, c'est Ă  dire au dessus des iframe qui composent le layout ?
    Merci !

    • Guillaume at 9:09

      Merci pour le compliment 🙂
      Je ne crois pas qu'il soit possible de mettre un contenu qui déborde de l'iframe. La seule solution, à mon avis, est d'utiliser une autre technique que l'iframe.

  2. Vincent at 1:09

    Bonjour
    et tout d'abord : MERCI
    j'aime la simplicité, et vous nous l'offrez ici

    Pourrait-on imaginez d'ajouter une légende sous la grande image ? (avec un lien cliquable ? )
    Merci pour votre aide

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.