コンテンツにスキップ

Top

MkDocsでギャラリー(Lightbox)

1. ダウンロード

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

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

2. JavaScriptとCSSファイルを書き換え

optionにreverseをつけたら反対方向にスライドするように、lightbox.cssとlightbox.jsを書き換える 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$ 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
>     }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$ 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ファイルの一番下あたりにでも書いておく 

1
2
3
4
5
<script>
lightbox.option({
    'reverse': true,
})
</script>

4. 動作確認

1
2
3
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

逆向きになった！