Images – fancybox3 · Documentation
目次
fancyboxのギャラリー画像にキャプションを設定する方法
date-captionを使う
公式ドキュメントの冒頭に記載されている分かりやすい方法。
コード
data-caption=””の中にはタグを入れることも可能。画像のタイトルの他、簡単な説明文なども載せるつもりならきちんとタグも含めて記述する方が良い。
ただし、data-caption=””の中身が長くなる場合はコードが読みにくくなってしまうという問題点がある。
jQueryを使う
HTML内にcaptionを示す記述を作って、そこからjQueryで取得する方法もある。
data-captionを使うよりもjsの記述は増えてしまうが、
- jsの記述量の差は誤差レベルなのでデメリットという程ではない
- 画像そのものとキャプションを分けて記述するので、コードの読みやすさ・理解のしやすさが増す
と言った理由により、こっちの方が良いと思う。
サンプル(コードは後述)内ではfigcaptionを使っているが、divなどでも問題ないはず。
ソースコード
HTML
data-captionを使う
jQueryを使う
青空の写真 その1
南の空を撮影しました。
青空の写真 その2
青空と街の風景を撮影しました。
夕焼けの写真
夕暮れの街並みを撮影しました。
CSS
h2 {
padding: 10px 0;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
margin: 100px 0 50px;
}
.gallery {
width: 60%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
}
img {
width: 200px;
height: 200px;
object-fit: cover;
}
.hidden {
/* figcaptionの内容はfancyboxのギャラリー用なので非表示にしておく */
display: none;
}
jQuery
$(function(){
/*
data-captionを使う
*/
$('[data-fancybox="gallery-01"]').fancybox();
/*
jQueryを使う
*/
$( '[data-fancybox="gallery-02"]' ).fancybox({
caption: function(instance, current ) {
return $(this).next('figcaption').html();
}
});
});