.lightbox, une ligthbox simple et légère en CSS et jQuery
J’ai récemment eu besoin d’une lightbox pour mon template EXTATIC mais je n’ai pas trouvé de solution idéale. J’ai donc décidé de réaliser mon propre script.
Démo
Pour tester ce script, rien de plus simple. Cliquez sur le logo .lightbox.
Le cahier des charges
Mes critères de sélection étaient la simplicité du code et sa légèreté. Je voulais aussi que cette lightbox ne soit qu’en CSS, en espérant trouver une certaine automatisation pour un grand nombre d’image, mais ce n’était pas compatible avec la simplicité que je souhaitais préserver. J’ai donc regardé du côté des scripts JavaScript/jQuery. Là encore, je n’ai pas trouvé ce que je cherchais, mais certains scripts m’ont servi de point de départ.
Je voulais une lightbox facile à mettre en place pour un grand nombre d’images, qui soit responsive et s’adapte donc l’écran mais aussi au contenu, et qu’elle soit la plus simple possible d’apparence, avec une fermeture au clic en dehors de l’image mise en avant.
L’intégration
Afin de simplifier l’intégration et pour veiller à ce que le code fonctionne dans le cas où il y aurait plusieurs images, j’ai décidé d’identifier la balise <figure> </figure> avec une classe class="lightbox". Ainsi, à chaque fois que j’intègre une image que je veux pouvoir mieux visualiser au sein d’un article, je n’ai qu’à utiliser la balise <figure class="lightbox"> <img> </figure>.
Script jQuery pour créer la lightbox. Vous devez mettre ce script dans le footer, avant la fermeture de la balise pour que le contenu de votre page soit chargé avant son exécution.
<!-- Lightbox -->
<script>
$(document).ready(function() { <!-- Le script s’exécutera après le chargement de la page -->
$('.lightbox img').click(function() { <!-- Le script s'exécute lorsque l'utilisateur clique sur une image contenu dans une balise <div class="lightbox"> </div> --><!-- Déclaration des variables -->
var $body = $('body');
var $imgHref = $(this).attr("src"); <!-- Nous récupérons l'attribut "src" de l'image sur laquelle l'utilisateur a cliqué -->
var $lightbox = $('<div id="lightbox">'); <!-- Nous créons une nouvelle balise <div> -->
var $lightboxImage = $('<img>').attr('src', $imgHref); <!-- Nous nous créons une nouvelle balise <img> à laquelle nous associons l'attribut "src" que nous avons récupéré -->
$lightbox.append($lightboxImage); <!-- Nous concaténons les variables -->
$lightbox.fadeIn(200); <!-- .fadeIn permet de faire apparaître l'image en fondu. Vous pouvez régler la durée en ms -->
$body.append($lightbox); <!-- Le contenu généré sera automatiquement ajouté avant la fermeture de la balise <div> -->
$('#lightbox').on('click', function(remove) { <!-- Lorsque l'utilisateur clique en dehors de l'image, la lightbox se ferme et est supprimée -->
if (remove.target == this) { <!-- La fermeture au clique ne fonctionne qu'en dehors de l'image -->
$lightbox.fadeOut(200, function(){ <!-- .fadeOut permet de faire disparaître l'image en fondu. Vous pouvez régler la durée en ms -->
$('#lightbox').remove(); <!-- Après avoir fait disparaître l'image on supprime la lightbox -->
});
}
});
});
});
</script>
CSS
Le CSS est particulièrement court puisque nous n’avons que deux balises à mettre en forme.
#lightbox {
position: fixed; /* La lightbox apparaît avant la fermeture de la balise <body> ce qui facilite son positionnement */
z-index: 999; /* Mettez une valeur supérieur à celle du contenu, de sorte que la lightbox soit toujours au dessus *//* Permet de faire apparaître la lightbox à partir des coordonnées (0;0) */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
#lightbox img {
position: absolute; /* Permet d'afficher l'image au centre de l'écran */
z-index: 998;
top: 50%; /* Centrage vertical */
left: 50%; /* Centrage horizontal */
transform: translate(-50%, -50%);
padding: 32px 32px 32px 32px; /* Création de fonds perdus pour éviter que l'image ne touche directement les bords du cadre *//* Création de marges pour éviter que l'image ne prenne tout l'écran */
max-width: 80%;
max-height: 80%;
background: rgb(255, 255, 255); /* Mise en place d'un fond au cas où l'image soit en transparence */
box-shadow: rgba(0, 0, 0, 0.8) 0 0 16px;
}
Et voilà.
Peut être que le code n’est pas parfaitement optimisé, mais il ne faut rien de plus pour avoir une lightbox fonctionnelle, simple et légère.
Si vous vous y connaissez un peu en développement et que vous connaissez WordPress, vous pouvez bien sûr mettre une image de base de type thumbnail et l’image originale quand l’utilisateur l’ouvre.
Sur ce blog, je maîtrise la résolution et le poids de mes images de contenu/article donc j’estime peu nécessaire l’utilisation de thumbnail.
050716
210816