lightboxを設定する
hugoは、SSGということで画像を貼ると張った大きさで表示されます。
クリックすると画像が大きく表示されるような仕組みはちょっと仕込みが必要です。
lightboxというJSな仕組みがあるようなので、仕込んでみます。
参考リンクを見ながら、最新版をgit cloneして所定のフォルダーにコピーします。
layouts/patials/head.htmlに以下を追記します。
1
2
3
4
| <!-- plugin lightbox-->
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
|
とやってましたがが、以下の内容を
/layouts/shortcodes/lightbox.htmlに作成すると、先ほどの追加は不要です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox.min.js">
</script>
<!-- set options
https://lokeshdhakar.com/projects/lightbox2/ -->
<script>
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
</script>
<div>
<a href="{{.Params.src}}" data-lightbox="{{.Params.group}}">
<img src="{{.Params.src}}" class="posting" />
</a>
</div>
|
mdファイルにこのように記述
あとは、mdファイルに以下のように記述すると画像が表示されて、画像をクリックすると大きくなります。
1
| {{＜lightbox src="/images/www/hogegoe.jpg">}}
|
(表示上、最初の"<“は大文字です)
以下lightboxによる画像表示の例です。クリックすると大きく表示されます。
lightbox->fancyboxはどうよ
参考リンクを見ながら、fancyboxを試してみます。設定は参考リンクのとおりです。
画像クリックしたときの表示がこっちの方がよそうです。
記述はこのように書くようです。
1
| {{＜fancybox "/images/www/" "category.jpg" "category" "cat_gp">}}
|
(表示上、最初の”<“は大文字です)
まとめ
hugoでクリック画像表示させるためlightboxとfancyboxを設定しました。SSGは、アドオンクリックでというわけにはいきません。
参考リンク
comments powered by Disqus