MkDocs GLightbox

A MkDocs plugin supports image lightbox with GLightbox.

GLightbox is a pure javascript lightbox library with mobile support.

Dependency

1. GLightbox javascript file and css file
   1. GLightbox==3.2.0

Usage

1. Install plugin from pypi

   pip install mkdocs-glightbox
   

2. Add glightbox plugin to your mkdocs.yml plugins sections:

   plugins:
      - glightbox
   

3. All images will be added to the lightbox effect automatically, except images in an anchor tag and emoji images from pymdown-extensions.

4. You may customize the plugin by passing options in 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
   

   Option	Default	Description
   touchNavigation	true	Enable or disable the touch navigation (swipe).
   loop	false	Loop slides on end.
   effect	zoom	Name of the effect on lightbox open. (zoom, fade, none)
   slide_effect	slide	Name of the effect on lightbox slide. (slide, zoom, fade, none)
   width	auto	Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width.
   height	auto	Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto.
   zoomable	true	Enable or disable zoomable images.
   draggable	true	Enable or disable mouse drag to go prev and next slide.
   skip_classes	[ ]	Disable lightbox of those image with specific custom class name.
   auto_caption	false	Enable or disable using alt of image as caption title automatically.
   caption_position	bottom	Default captions position. (bottom, top, left, right)
   background	white	The background CSS of lightbox image. The background will shown when the image is transparent. You can use any CSS value for the background for example #74b9ff or Gainsboro or none for nothing.
   shadow	true	Enable or disable the shadow of lightbox image. Disable it when the background is none to prevent shadow around the transparent image.

   Check more options information on GLightbox Docs.

5. For more flexibility, you can disable the lightbox with a specific image or a specific page.

6. Support lightbox image caption, check more details on Caption.
7. Support grouping images as galleries, check more details on Gallery.

How it works

1. Copy GLightbox script file into site/assets/javascripts/ directory and CSS file into site/assets/stylesheets/ directory
2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages
3. Search all image tags and warp with an anchor tag for GLightbox excluded images with skip class or already warped with an anchor tag

Demo

Click the image to try lightbox and enjoy the view of Taiwan.

Sunset over Taipei City. Credit: Thomas Tucker

Lanyu, Taiwan. Credit: Robson Hatsukami Morgan

Kenting, Taiwan. Credit: Yuhan Chang

License

This project is licensed under the MIT License - see the LICENSE.md file for details.