Edited at

Lightboxで画像のタイトルを改行したいときの変更箇所

More than 5 years have passed since last update.

==============================

モーダル・ダイアログを使って大きな画像を表示するのによく使われてる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タグに置き換えています。変更箇所はこの1行だけです。


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.

のように表示されます。