mkdocs glightbox

MkDocs GLightbox

Un plugin MkDocs prend en charge la lightbox d'image avec GLightbox.

GLightbox est une bibliothèque lightbox purement javascript avec prise en charge mobile.

Démo en direct avec Material for MkDocs.

Dépendance

1. Fichier javascript GLightbox et fichier CSS
   1. GLightbox==3.2.0

Usage

1. Installez le plugin depuis PyPI

   pip install mkdocs-glightbox

2. Ajoutez le plugin glightbox à vos sections de plugins mkdocs.yml :

    plugins :
      - glightbox

3. Toutes les images seront automatiquement ajoutées à l'effet lightbox, à l'exception des images dans une balise d'ancrage et des images emoji des extensions pymdown.

4. Vous pouvez personnaliser le plugin en passant des options dans mkdocs.yml :

    plugins :
      - glightbox :
          touchNavigation : true
          loop : false
          effect : zoom
          slide_effect : slide
          width : 100%
          height : auto
          zoomable : true
          draggable : true
          skip_classes :
            - custom-skip-class-name
          auto_caption : false
          caption_position : bottom
          background : white
          shadow : true
          manual : false

   Option	Défaut	Description
   ToucherNavigation	vrai	Activer ou désactiver la navigation tactile (swipe).
   boucle	FAUX	La boucle glisse à l'extrémité.
   effet	zoom	Nom de l’effet sur la lightbox ouverte. (zoom, fondu, aucun)
   slide_effect	glisser	Nom de l’effet sur la diapositive Lightbox. (diapositive, zoom, fondu, aucun)
   largeur	auto	Largeur pour les éléments en ligne et les iframes. Vous pouvez utiliser n'importe quelle unité, par exemple 90 % ou 100 vw pour toute la largeur.
   hauteur	auto	Hauteur des éléments en ligne et des iframes. Vous pouvez utiliser n'importe quelle unité, par exemple 90 %, 100 vh ou auto.
   zoomable	vrai	Activez ou désactivez les images zoomables.
   déplaçable	vrai	Activez ou désactivez le glisser de la souris pour passer à la diapositive précédente et suivante.
   sauter_classes	[ ]	Désactivez la visionneuse de ces images avec un nom de classe personnalisé spécifique.
   légende_auto	FAUX	Activez ou désactivez automatiquement l'utilisation de l'alt de l'image comme titre de légende.
   légende_position	bas	Position des sous-titres par défaut. (en bas, en haut, à gauche, à droite)
   arrière-plan	blanc	Le CSS d’arrière-plan de l’image lightbox. L'arrière-plan s'affichera lorsque l'image est transparente. Vous pouvez utiliser n'importe quelle valeur CSS pour l'arrière-plan, par exemple #74b9ff ou Gainsboro ou none pour rien.
   ombre	vrai	Activez ou désactivez l’ombre de l’image lightbox. Désactivez-le lorsque l'arrière-plan est none pour éviter les ombres autour de l'image transparente.
   manuel	FAUX	Lorsque cela est vrai, lightbox doit être activé manuellement pour chaque image en y ajoutant la classe on-glb ou en ajoutant glightbox: true meta sur la page.

   Consultez plus d’informations sur les options sur GLightbox Docs.

5. Pour plus de flexibilité :

   1. Désactiver par image : désactivez la lightbox pour des images spécifiques. Convient à un petit nombre d'images qui n'ont pas besoin de l'effet lightbox.
   2. Désactiver par page : désactivez la visionneuse pour des pages spécifiques. Convient à un petit nombre de pages qui n'ont pas besoin de l'effet lightbox.
   3. Activer par image : désactivez la lightbox pour des pages spécifiques mais activez certaines images sur ces pages. Convient à un petit nombre d’images nécessitant l’effet lightbox.
   4. Désactiver globalement mais activer par image ou page : désactivez la lightbox globalement mais activez des images ou des pages spécifiques. Convient à un grand nombre d'images ou de pages qui n'ont pas besoin de l'effet lightbox.

6. Prend en charge la légende de l'image Lightbox, vérifiez plus de détails sur la légende.

7. Prise en charge du regroupement d'images sous forme de galeries, vérifiez plus de détails sur Galerie.

Note

Si c'est la première fois que vous utilisez la fonctionnalité du plugin MkDocs, sachez que MkDocs inclut un plugin par défaut nommé search . Si vous souhaitez conserver la fonction de recherche, vous devez rajouter le plugin search à la liste plugins .

Comment ça marche

1. Copiez le fichier de script GLightbox dans le répertoire site/assets/javascripts/ et le fichier CSS dans le répertoire site/assets/stylesheets/ .
2. Importez le script GLightbox et le fichier CSS et ajoutez du code javascript sur chaque page, à l'exclusion des pages désactivées
3. Recherchez toutes les balises d'image et déformez avec une balise d'ancrage pour les images exclues par GLightbox avec la classe de saut ou déjà déformées avec une balise d'ancrage

Licence

Ce projet est sous licence MIT - voir le fichier LICENSE.md pour plus de détails.