Socket
Socket
Sign inDemoInstall

mkdocs-glightbox

Package Overview
Dependencies
0
Maintainers
1
Alerts
File Explorer

Install Socket

Protect your apps from supply chain attacks

Install

mkdocs-glightbox

MkDocs plugin supports image lightbox with GLightbox.

    0.3.7

Maintainers
1

Readme

MkDocs GLightbox

PyPI version PyPI downloads Codecov

A MkDocs plugin supports image lightbox with GLightbox.

GLightbox is a pure javascript lightbox library with mobile support.

Live demo with Material for MkDocs.

Dependency

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

Usage

  1. Install the 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
    
    OptionDefaultDescription
    touchNavigationtrueEnable or disable the touch navigation (swipe).
    loopfalseLoop slides on end.
    effectzoomName of the effect on lightbox open. (zoom, fade, none)
    slide_effectslideName of the effect on lightbox slide. (slide, zoom, fade, none)
    widthautoWidth for inline elements and iframes. You can use any unit for example 90% or 100vw for full width.
    heightautoHeight for inline elements and iframes. You can use any unit for example 90%, 100vh or auto.
    zoomabletrueEnable or disable zoomable images.
    draggabletrueEnable or disable mouse drag to go prev and next slide.
    skip_classes[ ]Disable lightbox of those image with specific custom class name.
    auto_captionfalseEnable or disable using alt of image as caption title automatically.
    caption_positionbottomDefault captions position. (bottom, top, left, right)
    backgroundwhiteThe 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.
    shadowtrueEnable 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

License

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

Keywords

FAQs


Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc