作成日: 2019.03.05

MkDocsでギャラリー(Lightbox)

Markdown記法でギャラリーを作ることは出来ない。
ので、それようのJavaScriptを埋め込んでギャラリーにする。

ここでは、Lightboxというスクリプトを使うことにする。

1-1. ダウンロード

LightboxからZipをダウンロードする。

$ wget https://github.com/lokesh/lightbox2/archive/master.zip
$ unzip master.zip

1-2. JavaScriptとCSSファイルの読み込み設定

lightbox.cssとlightbox.jsをそれぞれcssとjavascriptのディレクトリに移す。

$ cp lightbox2-master/dist/css/lightbox.css ./docs/css/
$ cp lightbox2-master/dist/js/lightbox.js ./docs/javascripts/
$ cp lightbox2-master/dist/images/* ./docs/images/

JavaScriptとCSSファイルを読み込むように設定する。

$ vi mkdocs.yml

extra_javascript:
    - 'javascripts/lightbox.js'

extra_css:
    - 'css/lightbox.css'

2. ギャラリー作成

2-1. 単発ギャラリー

<a href="../images/image1.jpg" data-lightbox="image1" data-title="My caption">Image #1</a>
<a href="../images/image1.jpg" data-lightbox="image1" data-title="My caption">Image #1</a>

Image #1
Image #2

2-2. 複数画像を一つのギャラリー内にまとめる

data-lightboxの値が一致していると買ってみまとめてくれる。

<a href="../images/image-1.jpg" data-lightbox="image">Image 1</a>
<a href="../images/image-2.jpg" data-lightbox="image">Image 2</a>
<a href="../images/image-3.jpg" data-lightbox="image">Image 3</a>
<a href="../images/image-4.jpg" data-lightbox="image">Image 4</a>

Image 1 Image 2 Image 3 Image 4

2-3. サムネイルを出す

サムネイルイメージを埋め込む。

<a href="../images/image-1.jpg" data-lightbox="example-1"><img src="../images/thumb-1.jpg"></a>
<a href="../images/image-2.jpg" data-lightbox="example-2"><img src="../images/thumb-2.jpg"></a>