Skip to content

Commit

Permalink
update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@blueswen
blueswen committed Nov 21, 2022
1 parent 67222b5 commit da38c2b
Show file tree
Hide file tree
Showing 15 changed files with 897 additions and 351 deletions.
35 changes: 28 additions & 7 deletions docs/404.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@


<link rel="icon" href="/blueswen/mkdocs-glightbox/assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.3.1, mkdocs-material-8.5.3+insiders-4.24.0">
<meta name="generator" content="mkdocs-1.4.2, mkdocs-material-8.5.3+insiders-4.24.0">



Expand Down Expand Up @@ -91,7 +91,7 @@
<a href="/blueswen/mkdocs-glightbox/." title="MkDocs GLightbox" class="md-header__button md-logo" aria-label="MkDocs GLightbox" data-md-component="logo">


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4V9m12 0a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2M4 11h4v1H4v-1m0 2h4v1H4v-1Z"/></svg>

</a>
<label class="md-header__button md-icon" for="__drawer">
Expand Down Expand Up @@ -127,7 +127,7 @@



<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<input class="md-option" data-md-color-media="(prefers-color-scheme: light)" data-md-color-scheme="default" data-md-color-primary="teal" data-md-color-accent="teal" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">

<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
Expand Down Expand Up @@ -193,7 +193,7 @@
<a href="/blueswen/mkdocs-glightbox/." title="MkDocs GLightbox" class="md-nav__button md-logo" aria-label="MkDocs GLightbox" data-md-component="logo">


<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4V9m12 0a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2M4 11h4v1H4v-1m0 2h4v1H4v-1Z"/></svg>

</a>
MkDocs GLightbox
Expand Down Expand Up @@ -346,17 +346,38 @@



<li class="md-nav__item">
<a href="/blueswen/mkdocs-glightbox/gallery/gallery/" class="md-nav__link">


<span class="md-ellipsis">
Gallery

</span>



</a>
</li>











<li class="md-nav__item md-nav__item--nested">



<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >


<label class="md-nav__link" for="__nav_4">
<label class="md-nav__link" for="__nav_5">


<span class="md-ellipsis">
Expand All @@ -370,7 +391,7 @@
</label>

<nav class="md-nav" aria-label="More Flexibility" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
More Flexibility
</label>
Expand Down
50 changes: 30 additions & 20 deletions docs/caption/caption/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<meta content="width=device-width,initial-scale=1" name="viewport"/>
<link href="https://github.com/blueswen/mkdocs-glightbox/caption/caption/" rel="canonical"/>
<link href="../../assets/images/favicon.png" rel="icon"/>
<meta content="mkdocs-1.3.1, mkdocs-material-8.5.3+insiders-4.24.0" name="generator"/>
<meta content="mkdocs-1.4.2, mkdocs-material-8.5.3+insiders-4.24.0" name="generator"/>
<title>Caption - MkDocs GLightbox</title>
<link href="../../assets/stylesheets/main.38a480a7.min.css" rel="stylesheet"/>
<link href="../../assets/stylesheets/palette.cbb835fc.min.css" rel="stylesheet"/>
Expand All @@ -19,12 +19,15 @@
<script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
<link href="../../assets/stylesheets/glightbox.min.css" rel="stylesheet"/><style>
html.glightbox-open { overflow: initial; height: 100%; }
.gdesc-inner { font-size: 0.75rem; }
.gslide-title { margin-top: 0px; user-select: text; }
.gslide-desc { color: #666; user-select: text; }
.gslide-image img { background: white; }

.gscrollbar-fixer { padding-right: 15px; }
.gdesc-inner { font-size: 0.75rem; }
body[data-md-color-scheme="slate"] .gdesc-inner { background: var(--md-default-bg-color);}
body[data-md-color-scheme="slate"] .gslide-title { color: var(--md-default-fg-color);}
body[data-md-color-scheme="slate"] .gslide-desc { color: var(--md-default-fg-color);}
</style><script src="../../assets/javascripts/glightbox.min.js"></script></head>
<body data-md-color-accent="" data-md-color-primary="" data-md-color-scheme="" dir="ltr">
<input autocomplete="off" class="md-toggle" data-md-toggle="drawer" id="__drawer" type="checkbox"/>
Expand All @@ -40,7 +43,7 @@
<header class="md-header" data-md-component="header">
<nav aria-label="Header" class="md-header__inner md-grid">
<a aria-label="MkDocs GLightbox" class="md-header__button md-logo" data-md-component="logo" href="../.." title="MkDocs GLightbox">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"></path></svg>
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4V9m12 0a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2M4 11h4v1H4v-1m0 2h4v1H4v-1Z"></path></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"></path></svg>
Expand All @@ -66,7 +69,7 @@
<label class="md-header__button md-icon" for="__palette_1" hidden="" title="Switch to light mode">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m14.3 16-.7-2h-3.2l-.7 2H7.8L11 7h2l3.2 9h-1.9M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69m-9.15 3.96h2.3L12 9l-1.15 3.65Z"></path></svg>
</label>
<input aria-label="Switch to dark mode" class="md-option" data-md-color-accent="" data-md-color-media="(prefers-color-scheme: light)" data-md-color-primary="" data-md-color-scheme="default" id="__palette_1" name="__palette" type="radio"/>
<input aria-label="Switch to dark mode" class="md-option" data-md-color-accent="teal" data-md-color-media="(prefers-color-scheme: light)" data-md-color-primary="teal" data-md-color-scheme="default" id="__palette_1" name="__palette" type="radio"/>
<label class="md-header__button md-icon" for="__palette_2" hidden="" title="Switch to dark mode">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"></path></svg>
</label>
Expand Down Expand Up @@ -97,7 +100,7 @@
<nav aria-label="Navigation" class="md-nav md-nav--primary md-nav--integrated" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a aria-label="MkDocs GLightbox" class="md-nav__button md-logo" data-md-component="logo" href="../.." title="MkDocs GLightbox">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54Z"></path></svg>
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16 6c-1.13 0-2.23.35-3.16 1H4c-1.11 0-2 .89-2 2v6c0 1.11.89 2 2 2h1v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h6v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1h1c1.11 0 2-.89 2-2V9c0-1.11-.89-2-2-2h-.85c-.92-.65-2.02-1-3.15-1m0 1.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5 3.5 3.5 0 0 1-3.5-3.5A3.5 3.5 0 0 1 16 7.5M4 9h4v1H4V9m12 0a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2M4 11h4v1H4v-1m0 2h4v1H4v-1Z"></path></svg>
</a>
MkDocs GLightbox
</label>
Expand Down Expand Up @@ -224,17 +227,25 @@
</ul>
</nav>
</li>
<li class="md-nav__item">
<a class="md-nav__link" href="../../gallery/gallery/">
<span class="md-ellipsis">
Gallery

</span>
</a>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" id="__nav_4" type="checkbox"/>
<label class="md-nav__link" for="__nav_4">
<input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" id="__nav_5" type="checkbox"/>
<label class="md-nav__link" for="__nav_5">
<span class="md-ellipsis">
More Flexibility

</span>
<span class="md-nav__icon md-icon"></span>
</label>
<nav aria-label="More Flexibility" class="md-nav" data-md-level="1">
<label class="md-nav__title" for="__nav_4">
<label class="md-nav__title" for="__nav_5">
<span class="md-nav__icon md-icon"></span>
More Flexibility
</label>
Expand Down Expand Up @@ -270,7 +281,7 @@ <h1 id="caption">Caption</h1>
<div class="highlight"><pre><span></span><code><a href="#__codelineno-0-1" id="__codelineno-0-1" name="__codelineno-0-1"></a><span class="nt">markdown_extensions</span><span class="p">:</span><span class="w"></span>
<a href="#__codelineno-0-2" id="__codelineno-0-2" name="__codelineno-0-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">attr_list</span><span class="w"></span>
</code></pre></div>
<p>Check more detail about <code>attr_list</code> on the <a href="https://python-markdown.github.io/extensions/attr_list/">official document</a>.</p>
<p>Check more details about <code>attr_list</code> on the <a href="https://python-markdown.github.io/extensions/attr_list/">official document</a>.</p>
<div class="admonition warning">
<p class="admonition-title">Warning</p>
<p>When the title or the description has been set, the plugin setting of lightbox image <code>height</code> and <code>width</code> will be overridden as <code>100vh</code>.</p>
Expand Down Expand Up @@ -320,7 +331,7 @@ <h3 id="image-alt-as-the-caption">Image alt as the caption</h3>
<div class="highlight"><pre><span></span><code><a href="#__codelineno-5-1" id="__codelineno-5-1" name="__codelineno-5-1"></a><span class="nt">markdown_extensions</span><span class="p">:</span><span class="w"></span>
<a href="#__codelineno-5-2" id="__codelineno-5-2" name="__codelineno-5-2"></a><span class="w"> </span><span class="p p-Indicator">-</span><span class="w"> </span><span class="l l-Scalar l-Scalar-Plain">meta</span><span class="w"></span>
</code></pre></div>
<p>Check more detail about <code>meta</code> on the <a href="https://python-markdown.github.io/extensions/meta_data/">official document</a>.</p>
<p>Check more details about <code>meta</code> on the <a href="https://python-markdown.github.io/extensions/meta_data/">official document</a>.</p>
</li>
</ul>
<div class="highlight"><span class="filename">Using image alt as caption title with page meta</span><pre><span></span><code><a href="#__codelineno-6-1" id="__codelineno-6-1" name="__codelineno-6-1"></a>---
Expand All @@ -330,23 +341,22 @@ <h3 id="image-alt-as-the-caption">Image alt as the caption</h3>
<a href="#__codelineno-6-5" id="__codelineno-6-5" name="__codelineno-6-5"></a>![<span class="nt">Yosemite, USA.</span>](<span class="na">../images/gallery/blueswen-yosemite.jpeg</span>)
</code></pre></div>
<div class="result">
<p><a class="glightbox" data-desc-position="bottom" data-description="" data-height="auto" data-title="Yosemite, USA." data-width="100%" href="../../images/gallery/blueswen-yosemite.jpeg"><img alt="Yosemite, USA." src="../../images/gallery/blueswen-yosemite.jpeg" width="500px"/></a></p>
<p><a class="glightbox" data-desc-position="bottom" data-height="auto" data-title="Yosemite, USA." data-width="100%" href="../../images/gallery/blueswen-yosemite.jpeg"><img alt="Yosemite, USA." src="../../images/gallery/blueswen-yosemite.jpeg" width="500px"/></a></p>
</div>
<h3 id="caption-on-page">Caption on page</h3>
<p>The built-in GLightbox caption feature only works in the <strong>light box</strong>. If you want the caption on the page beside the image too, you can consider using the <code>figure</code> and <code>figcaption</code> tags which mention in <a href="https://squidfunk.github.io/mkdocs-material/reference/images/#image-captions">Material for MkDocs document</a>. These features are also fully compatible with our plugin.</p>
<div class="highlight"><span class="filename">Using figure and figcaption</span><pre><span></span><code><a href="#__codelineno-7-1" id="__codelineno-7-1" name="__codelineno-7-1"></a>---
<a href="#__codelineno-7-2" id="__codelineno-7-2" name="__codelineno-7-2"></a><span class="gu">glightbox.auto_caption: true</span>
<a href="#__codelineno-7-3" id="__codelineno-7-3" name="__codelineno-7-3"></a><span class="gu">---</span>
<a href="#__codelineno-7-4" id="__codelineno-7-4" name="__codelineno-7-4"></a>
<a href="#__codelineno-7-5" id="__codelineno-7-5" name="__codelineno-7-5"></a>&lt;div class="result" markdown&gt;
<a href="#__codelineno-7-6" id="__codelineno-7-6" name="__codelineno-7-6"></a>&lt;figure markdown&gt;
<a href="#__codelineno-7-7" id="__codelineno-7-7" name="__codelineno-7-7"></a>![<span class="nt">Tulum, Mexico.</span>](<span class="na">../images/gallery/blueswen-tulum.jpeg</span>){ width="500px"}
<a href="#__codelineno-7-8" id="__codelineno-7-8" name="__codelineno-7-8"></a>&lt;figcaption&gt;Tulum, Mexico. Credit: Blueswen&lt;/figcaption&gt;
<a href="#__codelineno-7-9" id="__codelineno-7-9" name="__codelineno-7-9"></a>&lt;/figure&gt;
<a href="#__codelineno-7-5" id="__codelineno-7-5" name="__codelineno-7-5"></a>&lt;figure markdown&gt;
<a href="#__codelineno-7-6" id="__codelineno-7-6" name="__codelineno-7-6"></a>![<span class="nt">Tulum, Mexico.</span>](<span class="na">../images/gallery/blueswen-tulum.jpeg</span>){ width="500px"}
<a href="#__codelineno-7-7" id="__codelineno-7-7" name="__codelineno-7-7"></a>&lt;figcaption&gt;Tulum, Mexico. Credit: Blueswen&lt;/figcaption&gt;
<a href="#__codelineno-7-8" id="__codelineno-7-8" name="__codelineno-7-8"></a>&lt;/figure&gt;
</code></pre></div>
<div class="result">
<figure>
<p><a class="glightbox" data-desc-position="bottom" data-description="" data-height="auto" data-title="Tulum, Mexico." data-width="100%" href="../../images/gallery/blueswen-tulum.jpeg"><img alt="Tulum, Mexico." src="../../images/gallery/blueswen-tulum.jpeg" width="500px"/></a></p>
<p><a class="glightbox" data-desc-position="bottom" data-height="auto" data-title="Tulum, Mexico." data-width="100%" href="../../images/gallery/blueswen-tulum.jpeg"><img alt="Tulum, Mexico." src="../../images/gallery/blueswen-tulum.jpeg" width="500px"/></a></p>
<figcaption>Tulum, Mexico. Credit: Blueswen</figcaption>
</figure>
</div>
Expand All @@ -370,13 +380,13 @@ <h3 id="caption-on-page">Caption on page</h3>
</div>
</div>
</a>
<a aria-label="Next: Disable by image" class="md-footer__link md-footer__link--next" href="../../disable/image/" rel="next">
<a aria-label="Next: Gallery" class="md-footer__link md-footer__link--next" href="../../gallery/gallery/" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Next
</span>
Disable by image
Gallery
</div>
</div>
<div class="md-footer__button md-icon">
Expand All @@ -403,5 +413,5 @@ <h3 id="caption-on-page">Caption on page</h3>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["toc.integrate"], "search": "../../assets/javascripts/workers/search.720157f5.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}}</script>
<script src="../../assets/javascripts/bundle.f4c6f307.min.js"></script>
<script>document$.subscribe(() => {const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "zoom", "closeEffect": "zoom"});})</script></body>
<script>document$.subscribe(() => {const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": true, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "slide"});})</script></body>
</html>
Loading

0 comments on commit da38c2b

Please sign in to comment.