image_pdf

Lightbox simple avec jQuery

image_pdf

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.

Hiérarchie 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: absolute;
    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 grâce à 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.

Ce sera le code jQuery qui, suite au clic sur une vignette, 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 :

Articles connexes

La méthode getElementById La méthode JavaScript getElementById() permet de récupérer les informations d'une balise identifiée par son id. Syntaxe informations à récupérer = document.getElementBy...
jQuery UI jQuery UI est un complément de jQuery, qui permet notamment d’améliorer l’interface utilisateur. Beaucoup de confort ajouté ...
Programmation évènementielle Il est possible de programmer des réactions suite à des actions de l'internaute. Les actions des utilisateurs sont appelées évènement. Voici quelques exemples : Clic sur u...
Gestion des fenêtres Il est possible de créer de nouvelles fenêtres, de contrôler leur aspect et de les refermer de manière dynamique. Le code ci-dessous, scindé en 3 pages, illustre ces possibilités....
Langage JavaScript Le langage JavaScript permet d'exécuter des programmes simples comme la vérification d'un formulaire, ou très élaborés comme un jeu ou une application. Ce langage est gé...

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.