Lightboxで画像のタイトルを改行したいときの変更箇所
==============================
モーダル・ダイアログを使って大きな画像を表示するのによく使われてるLightboxですが、そのままだと写真の下のタイトルで改行できません。title="..."の中にbrタグを使ってしまうと、サムネイルにマウスをおいたときにbrタグがそのまま表示されてしまいます。ここではlightbox.jsの中で改行コードを
タグに置き換えるように書き換えます。
lightboxのバージョンは2.7.1です。
lightbox.js
323-333行目：変更前
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
//
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title)
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
323-333行目：変更後
// Enable anchor clicks in the injected caption html.
// Thanks Nate Wright for the fix. @https://github.com/NateWr
//
if (typeof this.album[this.currentImageIndex].title !== 'undefined' && this.album[this.currentImageIndex].title !== "") {
this.$lightbox.find('.lb-caption')
.html(this.album[this.currentImageIndex].title.replace(/\r\n/g, "<br>").replace(/(\n|\r)/g, "<br>"))
.fadeIn('fast')
.find('a').on('click', function(event){
location.href = $(this).attr('href');
});
}
.htmlの部分が変更されています。改行コードが見つかると、それをbrタグに置き換えています。変更箇所はこの１行だけです。
HTML
Lightboxでは画像のタイトルをtitle="..."、もしくはdata-title="..."で指定します。以下のように、HTMLファイル中で改行すればそれがそのまま反映されます。また空白行もそのまま反映されます。
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image
to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
上のようにHTMLに書くと、
Click the right half of the image
to move forward.
のように表示されます。
Author And Source
この問題について(Lightboxで画像のタイトルを改行したいときの変更箇所), 我々は、より多くの情報をここで見つけました https://qiita.com/Yuki_Yamashina/items/f556424ef18c74662e44著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .