Images – fancybox3 · Documentation
fancyboxのギャラリー画像にキャプションを設定する方法
date-captionを使う
公式ドキュメントの冒頭に記載されている分かりやすい方法。
コード
1 2 3 4 5 |
<a href="image.jpg" data-fancybox="images" data-caption="My caption"> <img src="thumbnail.jpg" alt="" /> </a> |
data-caption=””の中にはタグを入れることも可能。画像のタイトルの他、簡単な説明文なども載せるつもりならきちんとタグも含めて記述する方が良い。
ただし、data-caption=””の中身が長くなる場合はコードが読みにくくなってしまうという問題点がある。
jQueryを使う
HTML内にcaptionを示す記述を作って、そこからjQueryで取得する方法もある。
data-captionを使うよりもjsの記述は増えてしまうが、
- jsの記述量の差は誤差レベルなのでデメリットという程ではない
- 画像そのものとキャプションを分けて記述するので、コードの読みやすさ・理解のしやすさが増す
と言った理由により、こっちの方が良いと思う。
サンプル(コードは後述)内ではfigcaptionを使っているが、divなどでも問題ないはず。
ソースコード
HTML
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 |
<h2 class="hh hh4 main-c main-bdr">data-captionを使う</h2> <div class="gallery gallery-01"> <figure> <a href="bg_pattern1_aozora.png" data-fancybox="gallery-01" data-caption="青空の写真 その1"> <img src="bg_pattern1_aozora.png"> </a> </figure> <figure> <a href="bg_pattern2_aozora.png" data-fancybox="gallery-01" data-caption="青空の写真 その2"> <img src="bg_pattern2_aozora.png"> </a> </figure> <figure> <a href="bg_pattern3_yuyake.png" data-fancybox="gallery-01" data-caption="<h5>夕焼けの写真 その1</h5><time>2020.01.16</time><p>夕暮れの街並みを撮影しました。</p>"> <img src="bg_pattern3_yuyake.png"> </a> </figure> </div> <h2 class="hh hh4 main-c main-bdr">jQueryを使う</h2> <div class="gallery gallery-02"> <figure> <a href="bg_pattern1_aozora.png" data-fancybox="gallery-02"> <img src="bg_pattern1_aozora.png"> </a> <figcaption class="hidden"> <!-- この内容をキャプションとして表示する --> <h3>青空の写真 その1</h3> <time>2020.01.16</time> <p>南の空を撮影しました。</p> </figcaption> </figure> <figure> <a href="bg_pattern2_aozora.png" data-fancybox="gallery-02"> <img src="bg_pattern2_aozora.png"> </a> <figcaption class="hidden"> <!-- この内容をキャプションとして表示する --> <h3>青空の写真 その2</h3> <time>2020.01.16</time> <p>青空と街の風景を撮影しました。</p> </figcaption> </figure> <figure> <a href="bg_pattern3_yuyake.png" data-fancybox="gallery-02"> <img src="bg_pattern3_yuyake.png"> </a> <figcaption class="hidden"> <!-- この内容をキャプションとして表示する --> <h3>夕焼けの写真</h3> <time>2020.01.16</time> <p>夕暮れの街並みを撮影しました。</p> </figcaption> </figure> </div> |
CSS
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 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(function(){ /* data-captionを使う */ $('[data-fancybox="gallery-01"]').fancybox(); /* jQueryを使う */ $( '[data-fancybox="gallery-02"]' ).fancybox({ caption: function(instance, current ) { return $(this).next('figcaption').html(); } }); }); |
コメントを残す