mdBookでクリックしたら拡大画像をポップアップで表示するやつ

mdBookでクリックしたら拡大画像をポップアップで表示するやつをを実現する.

といっても, 難しいことはなく, mdBookは追加のJavaScriptを読み込むことができるので, それを使う.

Lightbox2をダウンロードしてきて, lightbox-plus-jquery.min.jsとlightbox.cssの2つのファイルを適当なディレクトリに置く. あとは, book.tomlに以下のように書けば導入は完了.

[output.html]
additional-js = ["./lightbox-plus-jquery.min.js"]
additional-css = ["./lightbox.css"]

NOTE: ファイルパスはbook.tomlからの相対パスで指定する.

あとは, ポップアップで拡大画像を表示したいところに以下のように書けばOK.

<a href="path/to/image" data-lightbox="image"><img src="path/to/image"/></a>