fancyboxのギャラリー画像にキャプションを設定する方法

サンプル

Images – fancybox3 · Documentation

http://fancyapps.com/fancybox/3/docs/#images

fancyboxのギャラリー画像にキャプションを設定する方法

date-captionを使う

公式ドキュメントの冒頭に記載されている分かりやすい方法。

コード

data-caption=””の中にはタグを入れることも可能。画像のタイトルの他、簡単な説明文なども載せるつもりならきちんとタグも含めて記述する方が良い。

ただし、data-caption=””の中身が長くなる場合はコードが読みにくくなってしまうという問題点がある。

jQueryを使う

HTML内にcaptionを示す記述を作って、そこからjQueryで取得する方法もある。

data-captionを使うよりもjsの記述は増えてしまうが、

  • jsの記述量の差は誤差レベルなのでデメリットという程ではない
  • 画像そのものとキャプションを分けて記述するので、コードの読みやすさ・理解のしやすさが増す

と言った理由により、こっちの方が良いと思う。

サンプル(コードは後述)内ではfigcaptionを使っているが、divなどでも問題ないはず。

ソースコード

HTML
CSS
jQuery

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です