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).

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();
});

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, // pour empêcher que le contenu dépasse
		showOverlay: false // pas d'overlay cette fois-ci
	});
});

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
	});
});

Télécharger la librairie :

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)

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...

// 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: false, // pour laisser le contenu à sa place, et afficher un clone en lightbox adjustContent: false, // empêche le contenu de dépasser de l'écran 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); }, // overlay, l'applat de couleur entre la page et la lightbox showOverlay: true, // pour afficher un overlay overlayClass: 'lightbox_overlay', overlaySpeed: 250, overlayManualStyle: false, // pour styler l'overlay manuellement via la feuille de style overlayStyle: { background: 'black', opacity: .6 }, // sinon, le style par défaut est appliqué en js