# MkDocs GLightbox
<p align="center">
<a target="_blank" href="https://pypi.org/project/mkdocs-glightbox"><img src="https://img.shields.io/pypi/v/mkdocs-glightbox.svg" alt="PyPI version"/></a>
<a target="_blank" href="https://pypi.org/project/mkdocs-glightbox"><img src="https://img.shields.io/pypi/dm/mkdocs-glightbox.svg" alt="PyPI downloads"/></a>
<a target="_blank" href="https://codecov.io/gh/blueswen/mkdocs-glightbox"><img src="https://codecov.io/gh/blueswen/mkdocs-glightbox/branch/main/graph/badge.svg?token=KAJS3NU81H" alt="Codecov"/></a>
</p>
A MkDocs plugin supports image lightbox with [GLightbox](https://github.com/biati-digital/glightbox).
GLightbox is a pure javascript lightbox library with mobile support.
[Live demo](https://blueswen.github.io/mkdocs-glightbox/) with [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/).
## Dependency
1. GLightbox javascript file and CSS file
1. GLightbox==3.2.0
## Usage
1. Install the plugin from PyPI
```bash
pip install mkdocs-glightbox
```
2. Add ```glightbox``` plugin to your mkdocs.yml plugins sections:
```yaml
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](https://facelessuser.github.io/pymdown-extensions/extensions/emoji/).
4. You may customize the plugin by passing options in mkdocs.yml:
```yaml
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](https://github.com/biati-digital/glightbox#lightbox-options).
5. For more flexibility, you can disable the lightbox with a [specific image](https://blueswen.github.io/mkdocs-glightbox/disable/image/) or a [specific page](https://blueswen.github.io/mkdocs-glightbox/disable/page/).
6. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
7. Support grouping images as galleries, check more details on [Gallery](https://blueswen.github.io/mkdocs-glightbox/gallery/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](https://github.com/Blueswen/mkdocs-glightbox/blob/main/LICENSE) file for details.
Raw data
{
"_id": null,
"home_page": "https://blueswen.github.io/mkdocs-glightbox",
"name": "mkdocs-glightbox",
"maintainer": "",
"docs_url": null,
"requires_python": "",
"maintainer_email": "",
"keywords": "mkdocs,plugin,lightbox",
"author": "Blueswen",
"author_email": "blueswen.tw@gmail.com",
"download_url": "https://files.pythonhosted.org/packages/f0/5a/d38df54137a7ce2a438af5e1727f205ce97897a826c39674117aa5b185c3/mkdocs-glightbox-0.3.7.tar.gz",
"platform": null,
"description": "# MkDocs GLightbox\n\n<p align=\"center\">\n<a target=\"_blank\" href=\"https://pypi.org/project/mkdocs-glightbox\"><img src=\"https://img.shields.io/pypi/v/mkdocs-glightbox.svg\" alt=\"PyPI version\"/></a>\n<a target=\"_blank\" href=\"https://pypi.org/project/mkdocs-glightbox\"><img src=\"https://img.shields.io/pypi/dm/mkdocs-glightbox.svg\" alt=\"PyPI downloads\"/></a>\n<a target=\"_blank\" href=\"https://codecov.io/gh/blueswen/mkdocs-glightbox\"><img src=\"https://codecov.io/gh/blueswen/mkdocs-glightbox/branch/main/graph/badge.svg?token=KAJS3NU81H\" alt=\"Codecov\"/></a>\n</p>\n\nA MkDocs plugin supports image lightbox with [GLightbox](https://github.com/biati-digital/glightbox).\n\nGLightbox is a pure javascript lightbox library with mobile support.\n\n[Live demo](https://blueswen.github.io/mkdocs-glightbox/) with [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/).\n\n## Dependency\n\n1. GLightbox javascript file and CSS file\n 1. GLightbox==3.2.0\n\n## Usage\n\n1. Install the plugin from PyPI\n\n ```bash\n pip install mkdocs-glightbox\n ```\n\n2. Add ```glightbox``` plugin to your mkdocs.yml plugins sections:\n\n ```yaml\n plugins:\n - glightbox\n ```\n\n3. All images will be added to the lightbox effect automatically, except images in an anchor tag and emoji images from [pymdown-extensions](https://facelessuser.github.io/pymdown-extensions/extensions/emoji/).\n\n4. You may customize the plugin by passing options in mkdocs.yml:\n\n ```yaml\n plugins:\n - glightbox:\n touchNavigation: true\n loop: false\n effect: zoom\n slide_effect: slide\n width: 100%\n height: auto\n zoomable: true\n draggable: true\n skip_classes:\n - custom-skip-class-name\n auto_caption: false\n caption_position: bottom\n background: white\n shadow: true\n ```\n\n | Option | Default | Description |\n |---|---|---|\n | touchNavigation | true | Enable or disable the touch navigation (swipe). |\n | loop | false | Loop slides on end. |\n | effect | zoom | Name of the effect on lightbox open. (zoom, fade, none) |\n | slide_effect | slide | Name of the effect on lightbox slide. (slide, zoom, fade, none) |\n | width | auto | Width for inline elements and iframes. You can use any unit for example 90% or 100vw for full width. |\n | height | auto | Height for inline elements and iframes. You can use any unit for example 90%, 100vh or auto. |\n | zoomable | true | Enable or disable zoomable images. |\n | draggable | true | Enable or disable mouse drag to go prev and next slide. |\n | skip_classes | [ ] | Disable lightbox of those image with specific custom class name. |\n | auto_caption | false | Enable or disable using alt of image as caption title automatically. |\n | caption_position | bottom | Default captions position. (bottom, top, left, right) |\n | 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. |\n | shadow | true | Enable or disable the shadow of lightbox image. Disable it when the background is `none` to prevent shadow around the transparent image. |\n\n Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).\n\n5. For more flexibility, you can disable the lightbox with a [specific image](https://blueswen.github.io/mkdocs-glightbox/disable/image/) or a [specific page](https://blueswen.github.io/mkdocs-glightbox/disable/page/).\n6. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).\n7. Support grouping images as galleries, check more details on [Gallery](https://blueswen.github.io/mkdocs-glightbox/gallery/gallery/).\n\n## How it works\n\n1. Copy GLightbox script file into `site/assets/javascripts/` directory and CSS file into `site/assets/stylesheets/` directory\n2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages\n3. Search all image tags and warp with an anchor tag for GLightbox excluded images with skip class or already warped with an anchor tag\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](https://github.com/Blueswen/mkdocs-glightbox/blob/main/LICENSE) file for details.\n\n\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "MkDocs plugin supports image lightbox with GLightbox.",
"version": "0.3.7",
"project_urls": {
"Homepage": "https://blueswen.github.io/mkdocs-glightbox",
"Source": "https://github.com/Blueswen/mkdocs-glightbox"
},
"split_keywords": [
"mkdocs",
"plugin",
"lightbox"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "89a8925e926ae9125131b713f6b233e1f91e1aed4f0f730bb5fd9543ccbb0f2a",
"md5": "eed8779eb126376f720ad244ec145d83",
"sha256": "9659631a9829d93d8fb0ce3a20a10261c258605ba4dc87a3b7b5d847b93a276d"
},
"downloads": -1,
"filename": "mkdocs_glightbox-0.3.7-py3-none-any.whl",
"has_sig": false,
"md5_digest": "eed8779eb126376f720ad244ec145d83",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": null,
"size": 30504,
"upload_time": "2024-01-24T15:16:46",
"upload_time_iso_8601": "2024-01-24T15:16:46.245143Z",
"url": "https://files.pythonhosted.org/packages/89/a8/925e926ae9125131b713f6b233e1f91e1aed4f0f730bb5fd9543ccbb0f2a/mkdocs_glightbox-0.3.7-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "f05ad38df54137a7ce2a438af5e1727f205ce97897a826c39674117aa5b185c3",
"md5": "26adbd163fd3c335b6f85448101b64a0",
"sha256": "4e890140a97dd4ad128cb92174384bd0ac33adec3304bbd2b7c48d0847685c4f"
},
"downloads": -1,
"filename": "mkdocs-glightbox-0.3.7.tar.gz",
"has_sig": false,
"md5_digest": "26adbd163fd3c335b6f85448101b64a0",
"packagetype": "sdist",
"python_version": "source",
"requires_python": null,
"size": 31054,
"upload_time": "2024-01-24T15:16:48",
"upload_time_iso_8601": "2024-01-24T15:16:48.138586Z",
"url": "https://files.pythonhosted.org/packages/f0/5a/d38df54137a7ce2a438af5e1727f205ce97897a826c39674117aa5b185c3/mkdocs-glightbox-0.3.7.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2024-01-24 15:16:48",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Blueswen",
"github_project": "mkdocs-glightbox",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "mkdocs-glightbox"
}
JSON
