MkDocsでギャラリー(Lightbox)
1. ダウンロード
LightboxからZipをダウンロードする。
$ wget https://github.com/lokesh/lightbox2/archive/master.zip
$ unzip master.zip
2. JavaScriptとCSSファイルを書き換え
optionにreverseをつけたら反対方向にスライドするように、lightbox.cssとlightbox.jsを書き換える
$ diff lightbox.js.org lightbox.js
102c102
< $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
---
> $('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a><a class="lb-prev-rev" href="" ></a><a class="lb-next-rev" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo($('body'));
164a166,193
> this.$lightbox.find('.lb-prev-rev').on('click', function() {
> if (self.currentImageIndex === 0) {
> self.changeImage(self.album.length - 1);
> } else {
> self.changeImage(self.currentImageIndex - 1);
> }
> return false;
> });
>
> this.$lightbox.find('.lb-next-rev').on('click', function() {
> if (self.currentImageIndex === self.album.length - 1) {
> self.changeImage(0);
> } else {
> self.changeImage(self.currentImageIndex + 1);
> }
> return false;
> });
>
> /*
> Show context menu for image on right-click
>
> There is a div containing the navigation that spans the entire image and lives above of it. If
> you right-click, you are right clicking this div and not the image. This prevents users from
> saving the image or using other context menu actions with the image.
>
> To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
> set pointer-events to none on the nav div. This is so that the upcoming right-click event on
>
275c304
< this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
---
> this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-prev-rev, .lb-next-rev, .lb-dataContainer, .lb-numbers, .lb-caption').hide();
398a428,450
> if (this.options.reverse) {
> if (this.album.length > 1) {
> if (this.options.wrapAround) {
> if (alwaysShowNav) {
> this.$lightbox.find('.lb-prev-rev, .lb-next-rev').css('opacity', '1');
> }
> this.$lightbox.find('.lb-prev-rev, .lb-next-rev').show();
> } else {
> if (this.currentImageIndex > 0) {
> this.$lightbox.find('.lb-prev-rev').show();
> if (alwaysShowNav) {
> this.$lightbox.find('.lb-prev-rev').css('opacity', '1');
> }
> }
> if (this.currentImageIndex < this.album.length - 1) {
> this.$lightbox.find('.lb-next-rev').show();
> if (alwaysShowNav) {
> this.$lightbox.find('.lb-next-rev').css('opacity', '1');
> }
> }
> }
> }
> } else {
418a471
> }
$ diff lightbox.css.org lightbox.css
105a106,111
> .lb-prev-rev, .lb-next-rev {
> height: 100%;
> cursor: pointer;
> display: block;
> }
>
137a144,179
> filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
> opacity: 1;
> }
>
> .lb-nav a.lb-prev-rev {
> width: 64%;
> right: 0;
> float: right;
> background: url(../images/next.png) right 48% no-repeat;
> filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
> opacity: 0;
> -webkit-transition: opacity 0.6s;
> -moz-transition: opacity 0.6s;
> -o-transition: opacity 0.6s;
> transition: opacity 0.6s;
> }
>
> .lb-nav a.lb-prev-rev:hover {
> filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
> opacity: 1;
> }
>
> .lb-nav a.lb-next-rev {
> width: 34%;
> left: 0;
> float: left;
> background: url(../images/prev.png) left 48% no-repeat;
> filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
> opacity: 0;
> -webkit-transition: opacity 0.6s;
> -moz-transition: opacity 0.6s;
> -o-transition: opacity 0.6s;
> transition: opacity 0.6s;
> }
>
> .lb-nav a.lb-next-rev:hover {
3. Optionを追加
mkdocs.ymlのextraから読み込んでいたlightbox.jsはbase.htmlを直接書き換えて、<head>内で読み込むように修正。
(option指定のscriptでエラーになって読み込めないので)
reverseオプションを.mdファイル内に追加する。
以下のscriptを.mdファイルの一番下あたりにでも書いておく
<script>
lightbox.option({
'reverse': true,
})
</script>
4. 動作確認
<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
逆向きになった！