LoginSignup
5
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-08-31

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

モーダル・ダイアログを使って大きな画像を表示するのによく使われてる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.

のように表示されます。

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5