新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

Lightboxのキャプション(写真の説明文)に改行を入れる方法【jQuery】

2018.8.18 2019.4.15

Lightboxのキャプション(写真の説明文)に改行を入れる方法【jQuery】
Web制作 0 0

こちらの記事は、このような方におすすめです。

・ホームページのフォトギャラリーに、改行も含めた文章を入れたい方
・Lightboxでできることを増やしたい方

妙高Web屋LINE@ 友だち追加

ホームページのフォトギャラリーでよく用いられるLightbox(ライトボックス)ですが、写真に付随するキャプション(説明文)を設定することも可能です。

単語や短文でももちろん可能ですが、場合によっては長めの文章で、改行を含めたい場合もあるようです。

そこで今回の記事は、Lightboxの写真のキャプション(説明文)に改行を含める場合の手順をご紹介します。

この記事の目次

【手順1】lightbox.jsのコードを編集する

まずは、[lightbox.js]のコードを一部編集します。

ちょうどclass名[lb-caption]に関する記述のあたりです。

下記のコードを…、

.html(this.album[this.currentImageIndex].title)

このように書き換えてみてください。

.html(this.album[this.currentImageIndex].title.replace(/\r\n/g, "<br />").replace(/(\n|\r)/g, "<br />"))

ページの先頭へ戻る

【手順2】aタグのtitle属性またはdata-title属性に改行を含めたキャプションを入力する

上記の変更を[lightbox.js]で施したうえで、HTMLのキャプション部分を設定します。

<a href="images/photo01.jpg" data-lightbox="group01" data-title="改行を含むキャプションを
表示させます。"><img src="images/thumb01.jpg"></a>

いかがでしょう?

このようにすることで、キャプションに改行を含めることができるようになっているはずです。

ページの先頭へ戻る

参考サイト

今回の記事を作成するにあたり、こちらのページを参考にさせていただきました。

ページの先頭へ戻る

【Facebookページ更新中】ページへの「いいね!」を押して最新情報をGET!

【Facebookページ更新中】「いいね!」お願いいたします!

【YouTube更新中】チャンネル登録お願いいたします!

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

YouTubeチャンネル更新中!

妙高Web屋ではこのたび、YouTubeチャンネルを開設いたしました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を動画形式で発信していきます。

チャンネル登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ