Update docs

Author: blueswen

CHANGELOG

@@ -1,3 +1,10 @@
+mkdocs-glightbox-0.3.1 (2022-11-22)
+
+    * Supported lightbox slide effect customization (#8)
+    * Supported synchronized lightbox caption dark mode with Material for MkDocs (#7)
+    * Supported glightbox built-in gallery feature (#11)
+    * Supported skip image in the anchor tag
+
 mkdocs-glightbox-0.3.0 (2022-09-29)
 
     * Fixed width and height setting in config not working bug

README.md

@@ -34,7 +34,9 @@ GLightbox is a pure javascript lightbox library with mobile support.
        - glightbox
     ```
 
-3. You may customize the plugin by passing options in mkdocs.yml:
+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:
@@ -69,8 +71,15 @@ GLightbox is a pure javascript lightbox library with mobile support.
 
     Check more options information on [GLightbox Docs](https://github.com/biati-digital/glightbox#lightbox-options).
 
-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/).
-5. Support lightbox image caption, check more details on [Caption](https://blueswen.github.io/mkdocs-glightbox/caption/caption/).
+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
 

demo-mkdocs/docs/caption/caption.md

@@ -11,7 +11,7 @@ markdown_extensions:
   - attr_list
 ```
 
-Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
 
 !!! warning "Warning"
 
@@ -87,7 +87,7 @@ Since adding a title attribute to each image may be frustrating, we provide an `
       - meta
     ```
 
-    Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
+    Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
 
 ```markdown title="Using image alt as caption title with page meta"
 ---
@@ -112,7 +112,6 @@ The built-in GLightbox caption feature only works in the **light box**. If you w
 glightbox.auto_caption: true
 ---
 
-<div class="result" markdown>
 <figure markdown>
 ![Tulum, Mexico.](../images/gallery/blueswen-tulum.jpeg){ width="500px"}
 <figcaption>Tulum, Mexico. Credit: Blueswen</figcaption>

demo-mkdocs/docs/disable/image.md

@@ -5,7 +5,7 @@ markdown_extensions:
   - attr_list
 ```
 
-Check more detail about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
 
 The customized classes could be set in plugin option:
 

demo-mkdocs/docs/disable/page.md

@@ -9,7 +9,7 @@ markdown_extensions:
   - meta
 ```
 
-Check more detail about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
+Check more details about ```meta``` on the [official document](https://python-markdown.github.io/extensions/meta_data/).
 
 ## Demo
 

demo-mkdocs/docs/gallery.md

@@ -0,0 +1,69 @@
+# Gallery
+
+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```:
+
+```yaml
+markdown_extensions:
+  - attr_list
+```
+
+Check more details about ```attr_list``` on the [official document](https://python-markdown.github.io/extensions/attr_list/).
+
+## Demo
+
+There are two galleries: taipei and seattle.
+
+```markdown title="Setting gallery with data-gallery attribute"
+### Taipei
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
+
+### Seattle
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
+```
+
+### Taipei
+
+<figure markdown>
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-city.jpeg){data-gallery="taipei"}
+
+<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Taipei, Taiwan. Credit: Yuyu Liu](yuyu-taipei-sky.jpeg){data-gallery="taipei"}
+
+<figcaption>Taipei, Taiwan. Credit: Yuyu Liu</figcaption>
+</figure>
+
+### Seattle
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-1.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-2.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>
+
+<figure markdown>
+
+![Seattle, America. Credit: Yuyu Liu](yuyu-seattle-3.jpeg){data-gallery="seattle"}
+
+<figcaption>Seattle, America. Credit: Yuyu Liu</figcaption>
+</figure>