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

Images – fancybox3 · Documentation

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

fancyboxのギャラリー画像にキャプションを設定する方法
- date-captionを使う
- jQueryを使う
ソースコード

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

date-captionを使う

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

コード


<a href="image.jpg" data-fancybox="images" data-caption="My caption">
	<img src="thumbnail.jpg" alt="" />
</a>

</a>

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

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

jQueryを使う

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

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

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

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

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

ソースコード

HTML


<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>

<h2 class="hh hh4 main-c main-bdr">data-captionを使う</h2>

</a>

</figure>

</a>

</figure>

<a href="bg_pattern3_yuyake.png" data-fancybox="gallery-01" data-caption="<h5>夕焼けの写真その1</h5><time>2020.01.16</time><p>夕暮れの街並みを撮影しました。</p>">

</a>

</figure>

</div>

<h2 class="hh hh4 main-c main-bdr">jQueryを使う</h2>

</a>

<h3>青空の写真その1</h3>

<p>南の空を撮影しました。</p>

</figcaption>

</figure>

</a>

<h3>青空の写真その2</h3>

<p>青空と街の風景を撮影しました。</p>

</figcaption>

</figure>

</a>

<h3>夕焼けの写真</h3>

<p>夕暮れの街並みを撮影しました。</p>

</figcaption>

</figure>

</div>

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;
}

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();
        }
    });
});

$(function(){

data-captionを使う

$('[data-fancybox="gallery-01"]').fancybox();

jQueryを使う

$( '[data-fancybox="gallery-02"]' ).fancybox({

caption: function(instance, current ) {

return $(this).next('figcaption').html();

}

});

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

date-captionを使う

jQueryを使う

ソースコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル