fancyboxの画像幅を変更する

hugoを使い始めて数か月。ページ内に画像を張るのはfancyboxを使ってます。 デフォルトのまま使うと、表示画像が元画像の幅になりページからはみ出ます。

これを何とか修正したいと思ます。

先人を探せ

先人を探してもそもそもhugoを日本語で使っているユーザーは少ないようです。 これまでfront周りは見た目のお好みとあまり真剣に触ってきませんでした。

勉強しつつお試しつつということで、少しづつ修正します。

layout/shortcodes/fancybox.html

hugoは、このフォルダーに動かしたいスクリプトを入れておくと、自動的にhtmlに埋め込んでくれます。

1
2
3

    <div class="fancybox">
      <a data-fancybox="{{ $gallery }}" href="{{ $path }}/{{ $file }}" data-caption="{{ $caption }}"><img src="{{ $path }}/{{ $file }}" width="300px"></a>
    </div>

ちょっとやり方はベタですが、htmlに埋め込む箇所にwidth="300px"を挿入しました。もう少しfancybox3のoptionを調べて試行錯誤を続けてみます。

画像クリックしたときに、ギャラリーとしてズームするらしいですがそこがちゃんと動きません。こちらも逐次修正します。

画像クリックしたときに、Group表示するようになりました。Firefoxでは動かないと思っていたら、Firefoxをリセットすると動くとのページをみつけ、やってみるとおーーー。 ちゃんと動きました。

参考リンク