jQuery simple Lightbox

Une librairie Javascript simple mais complète, pour gérer l'affichage de contenus en ligthbox par dessus une page web.

Fortement inspirée de ligthbox_me qui ne marche pas toujours idéalement, et qui n'est plus mis à jour depuis un moment (la démo ne marche plus).

Télécharger la librairie :

Version 1.03 mise à jour le 19/12/2023

jquery-simpleLightbox.js
jquery-simpleLightbox.css

(Le fichier css contient seulement 5 lignes, que vous pouvez juste copier-coller dans votre feuille de style et modifier librement)

Exemples d'utilisation :

Lightbox d'un élément caché

<img src="img/Yves-Jo-Malgorn-Light-Guns.jpg" id="img3" style="display:none;">
<button id="btn3">Try me</button>

$('#btn3').on('click', function() {
   $('#img3').simpleLightbox(); // clone et rend visible le contenu caché
});

Passer en lightbox un élément visible

Avec une légende pour monter que c'est aussi possible :)

<div id="img2">
	<img src="img/komboh1.jpg">
	<p>Avec une légende pour monter que c'est aussi possible :)</p>
</div>

$('#img2').on('click', function() {
	$(this).simpleLightbox({
		adjustContent: true, // empêche le contenu de dépasser
		overlayStyle: { background: 'red', opacity: .6 } // changer le style de l'overlay
	});
});

Lightbox en mode galerie

<div id="galerie">
	<img src="img/Yves-Jo-Malgorn-Controllers.jpg">
	<img src="img/komboh9.jpg">
	<img src="img/good.jpg">
	<img src="img/light-guns2.jpg">
</div>

$('#galerie img').on('click', function() {
	$(this).simpleLightbox({
		adjustContent: true,  // pour empêcher que le contenu dépasse
		navSiblings: true, // diaporama avec ses voisins !
		nextSiblingOnClick: true, // au suivant au clic sur une des diapos
	});
});

Documentation

La librairie nécessite jQuery pour fonctionner.

Exemple d'utilisation basique :

// je clique sur #btn3, ça affiche #img3

$('#btn3').on('click', function() {
   $('#img3').simpleLightbox();
});

Paramètres optionnels :

La valeur indiquée ci-dessous pour chaque propriété est celle par défaut.
Si c'est false, c'est que ce n'est PAS actif par défaut...

// overlay, l'applat de couleur entre la page et la lightbox showOverlay: true, // pour afficher un overlay overlayClass: 'lightbox_overlay', overlaySpeed: 250, overlayStyle: { background: 'black', opacity: .6 }, // si on veut styler l'overlay en JS
// close button closeSelector: ".close", // tous les élements .close du contenu fermeront la lightbox au clic closeClick: true, closeEsc: true, // fermer avec la touche ESC
// callbacks = événements de la lightbox à remplir si besoin onOpen: function($this) {}, onClose: function($this) {}, zIndex: 999,
// contents contentSpeed: 300, cloneContent: true, // laisse le contenu à sa place et utilise un clone dans la lightbox adjustContent: false, // empêche le contenu de dépasser de l'écran, garde un peu de marge autour contentWidth: '80%', contentHeight: '80%', contentFit: 'contain', // ou 'cover' centered: true, // contenu centré avec flex, en js contentPosition: 'fixed', // ou 'absolute' pour permettre le scroll du contenu s'il dépasse contentClass: 'lightbox_content', // ajoute cette classe au contenu, pour pouvoir ajouter du style en css
// gallery mode navSiblings: false, // pour activer les boutons précédent/suivant nextSiblingOnClick: false, // pour passer au suivant au clic sur le contenu navSiblingsClass: 'lightbox_nav', // + .prev et .next siblingInSpeed: 350, siblingOutSpeed: 250, nextContent: '→', prevContent: '←', siblingOutFunc: function(way, $obj, callback){ // way -1 ou 1 return $obj.fadeOut(opts.siblingOutSpeed, callback); // important d'appeler callback dans l'anim }, siblingInFunc: function(way, $obj){ return $obj.fadeIn(opts.siblingInSpeed); },

Agir dans la lightbox en JS

Par défaut c'est donc un clone du contenu qui est affiché dans la lightbox.

Pour agir sur ce clone sans agir sur l'original, vous pouvez "chaîner" vos instructions après .simpleLightbox() :

$('.hidden-content').simpleLigthbox(); // renvoie le clone nouvellement fabriqué

On peut donc faire :

$('.hidden-content').simpleLigthbox().on('click', function(){ ... }); // etc On peut aussi utiliser le paramètre dédié, qui spécifie une fonction exécutée juste à l'ouverture de la ligthbox :

$('.hidden-content').simpleLigthbox({
    onOpen: function(){
        $(this).on('click', function(){ ... });
        // $(this) c'est le clone affiché
    }
});