Skip to content

Commit 50e3242

Browse files
blueswenblueswen
committed
Update docs
1 parent 2c1b15b commit 50e3242

15 files changed

+119
-25
lines changed

‎CHANGELOG

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
mkdocs-glightbox-0.3.1 (2022-11-22)
2+
3+
* Supported lightbox slide effect customization (#8)
4+
* Supported synchronized lightbox caption dark mode with Material for MkDocs (#7)
5+
* Supported glightbox built-in gallery feature (#11)
6+
* Supported skip image in the anchor tag
7+
18
mkdocs-glightbox-0.3.0 (2022-09-29)
29

310
* Fixed width and height setting in config not working bug

‎README.md

+12-3
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,9 @@ GLightbox is a pure javascript lightbox library with mobile support.
3434
- glightbox
3535
```
3636

37-
3. You may customize the plugin by passing options in mkdocs.yml:
37+
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/).
38+
39+
4. You may customize the plugin by passing options in mkdocs.yml:
3840

3941
```yaml
4042
plugins:
@@ -69,8 +71,15 @@ GLightbox is a pure javascript lightbox library with mobile support.
6971

7072
Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
7173

72-
4. 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/).
73-
5. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
74+
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/).
75+
6. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
76+
7. Support grouping images as galleries, check more details on [Gallery](https://blueswen.github.io/mkdocs-glightbox/gallery/gallery/).
77+
78+
## How it works
79+
80+
1. Copy GLightbox script file into `site/assets/javascripts/` directory and CSS file into `site/assets/stylesheets/` directory
81+
2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages
82+
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
7483

7584
## License
7685

‎demo-mkdocs/docs/caption/caption.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ markdown_extensions:
1111
- attr_list
1212
```
1313
14-
Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
14+
Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
1515

1616
!!! warning "Warning"
1717

@@ -87,7 +87,7 @@ Since adding a title attribute to each image may be frustrating, we provide an `
8787
- meta
8888
```
8989

90-
Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
90+
Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
9191

9292
```markdown title="Using image alt as caption title with page meta"
9393
---
@@ -112,7 +112,6 @@ The built-in GLightbox caption feature only works in the **light box**. If you w
112112
glightbox.auto_caption: true
113113
---
114114
115-
<div class="result" markdown>
116115
<figure markdown>
117116
![Tulum, Mexico.](../images/gallery/blueswen-tulum.jpeg){ width="500px"}
118117
<figcaption>Tulum, Mexico. Credit: Blueswen</figcaption>

‎demo-mkdocs/docs/disable/image.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ markdown_extensions:
55
- attr_list
66
```
77
8-
Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
8+
Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
99

1010
The customized classes could be set in plugin option:
1111

‎demo-mkdocs/docs/disable/page.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ markdown_extensions:
99
- meta
1010
```
1111
12-
Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
12+
Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
1313

1414
## Demo
1515

‎demo-mkdocs/docs/gallery.md

-11
This file was deleted.

‎demo-mkdocs/docs/gallery/gallery.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Gallery
2+
3+
Built-in GLightbox gallery feature can be used by adding attribute ```data-gallery``` through markdown_extensions ```attr_list```. The image with the same gallery name will be grouped as a galley in the light box. Enable ```attr_list``` via ```mkdocs.yml```:
4+
5+
```yaml
6+
markdown_extensions:
7+
- attr_list
8+
```
9+
10+
Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
11+
12+
## Demo
13+
14+
There are two galleries: taipei and seattle.
15+
16+
```markdown title="Setting gallery with data-gallery attribute"
17+
### Taipei
18+
19+
![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
20+
21+
![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
22+
23+
### Seattle
24+
25+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
26+
27+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
28+
29+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
30+
```
31+
32+
### Taipei
33+
34+
<figure markdown>
35+
36+
![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
37+
38+
<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
39+
</figure>
40+
41+
<figure markdown>
42+
43+
![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
44+
45+
<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
46+
</figure>
47+
48+
### Seattle
49+
50+
<figure markdown>
51+
52+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
53+
54+
<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
55+
</figure>
56+
57+
<figure markdown>
58+
59+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
60+
61+
<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
62+
</figure>
63+
64+
<figure markdown>
65+
66+
![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
67+
68+
<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
69+
</figure>

‎demo-mkdocs/docs/gallery/yuyu-seattle-1.jpeg

319 KB
Loading

‎demo-mkdocs/docs/gallery/yuyu-seattle-2.jpeg

377 KB
Loading

‎demo-mkdocs/docs/gallery/yuyu-seattle-3.jpeg

311 KB
Loading

‎demo-mkdocs/docs/gallery/yuyu-taipei-city.jpeg

99.6 KB
Loading

‎demo-mkdocs/docs/gallery/yuyu-taipei-sky.jpeg

117 KB
Loading

‎demo-mkdocs/docs/index.md

+20-5
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
# MkDocs GLightbox
1+
# MkDocs GLightbox
2+
3+
<p class="text-center" markdown>
4+
[![PyPI version](https://img.shields.io/pypi/v/mkdocs-glightbox.svg)](https://pypi.org/project/mkdocs-glightbox)
5+
[![PyPI downloads](https://img.shields.io/pypi/dm/mkdocs-glightbox.svg)](https://pypi.org/project/mkdocs-glightbox)
6+
[![Codecov](https://codecov.io/gh/blueswen/mkdocs-glightbox/branch/main/graph/badge.svg?token=KAJS3NU81H)](https://codecov.io/gh/blueswen/mkdocs-glightbox)
7+
</p>
28

39
A MkDocs plugin supports image lightbox with [GLightbox](https://github.com/biati-digital/glightbox).
410

@@ -26,7 +32,9 @@ GLightbox is a pure javascript lightbox library with mobile support.
2632
- glightbox
2733
```
2834

29-
3. You may customize the plugin by passing options in mkdocs.yml:
35+
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/).
36+
37+
4. You may customize the plugin by passing options in mkdocs.yml:
3038

3139
```yaml
3240
plugins:
@@ -46,7 +54,7 @@ GLightbox is a pure javascript lightbox library with mobile support.
4654
```
4755

4856
| Option | Default | Description |
49-
|------------------|---------|------------------------------------------------------------------------------------------------------|
57+
| ---------------- | ------- | ---------------------------------------------------------------------------------------------------- |
5058
| touchNavigation | true | Enable or disable the touch navigation (swipe). |
5159
| loop | false | Loop slides on end. |
5260
| effect | zoom | Name of the effect on lightbox open. (zoom, fade, none) |
@@ -61,8 +69,15 @@ GLightbox is a pure javascript lightbox library with mobile support.
6169

6270
Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
6371

64-
4. For more flexibility, you can disable lightbox by a [specific image](./disable/image.md) or a [specific page](./disable/page.md).
65-
5. Support lightbox image caption, check more details on [Caption](./caption/caption.md)
72+
5. For more flexibility, you can disable the lightbox with a [specific image](./disable/image.md) or a [specific page](./disable/page.md).
73+
6. Support lightbox image caption, check more details on [Caption](./caption/caption.md).
74+
7. Support grouping images as galleries, check more details on [Gallery](./gallery/gallery.md).
75+
76+
## How it works
77+
78+
1. Copy GLightbox script file into `site/assets/javascripts/` directory and CSS file into `site/assets/stylesheets/` directory
79+
2. Import GLightbox script and CSS file and add javascript code on each page excluded disabled pages
80+
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
6681

6782
## Demo
6883

‎demo-mkdocs/mkdocs.yml

+6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ edit_uri: ""
88

99
theme:
1010
name: material
11+
12+
icon:
13+
logo: material/projector
1114

1215
features:
1316
- toc.integrate
@@ -22,6 +25,8 @@ theme:
2225
# Palette toggle for light mode
2326
- media: "(prefers-color-scheme: light)"
2427
scheme: default
28+
primary: teal
29+
accent: teal
2530
toggle:
2631
icon: material/brightness-7
2732
name: Switch to dark mode
@@ -63,6 +68,7 @@ nav:
6368
- Sea: taiwan/sea.md
6469
- Mountain: taiwan/mountain.md
6570
- Caption: caption/caption.md
71+
- Gallery: gallery/gallery.md
6672
- More Flexibility:
6773
- Disable by image: disable/image.md
6874
- Disable by page: disable/page.md

‎setup.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
setup(
77
name="mkdocs-glightbox",
8-
version="0.3.0",
8+
version="0.3.1",
99
author="Blueswen",
1010
author_email="blueswen.tw@gmail.com",
1111
url="https://blueswen.github.io/mkdocs-glightbox",

0 commit comments

Comments
 (0)