Lightboxでタイトルにリンクをつけたいときの変更箇所

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

モーダル・ダイアログを使って大きな画像を表示するのによく使われてるLightboxですが、そのままだと写真の下のタイトルにリンクを張って別のページに飛ばすことができません。以下はそれを可能にするためのlightbox.jsの変更箇所です。

lightboxのバージョンは2.7.1です。

lightbox.js

135-140行目：変更前

      function addToAlbum($link) {
        self.album.push({
          link: $link.attr('href'),
          title: $link.attr('data-title') || $link.attr('title')
        });
      }

135-140行目：変更後

      function addToAlbum($link) {
        self.album.push({
          link: $link.attr('href'),
          hyperref: $link.attr('hyperref'),
          title: $link.attr('data-title') || $link.attr('title')
        });
      }

hyperrefという属性を新たに追加しています。HTMLの方ではこの属性にリンク先を設定することになります。

323-332行目：変更前

      // 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-332行目：変更後

      // 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('<a href="'+this.album[this.currentImageIndex].hyperref+'">'+this.album[this.currentImageIndex].title+'</a>')
          .fadeIn('fast')
          .find('a').on('click', function(event){
            location.href = $(this).attr('href');
          });
      }

.htmlの部分が変更されています。タイトルを追加する際にa要素で囲むようにしています。

jsファイルの変更箇所は以上です。

HTMLファイル

HTMLの方では

<a class="example-image-link" href="img/demopage/image-3.jpg" hyperref="リンク先のアドレス" 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>

のようにhyperrefという属性を追加して、その値にリンク先のアドレスを書いてください。

CSSファイル

また、a要素のスタイルを変更したい場合は、lightbox.cssに

.lb-dataContainer > .lb-data > .lb-details > .lb-caption > a {
  text-decoration: none;
  display: block;
  margin-top: 5px;
  color: #ccc;
}

.lb-dataContainer > .lb-data > .lb-details > .lb-caption > a:hover {
  text-decoration: none;
  color: #ac3cbd;
}

を追加してください。色やマージン等は適宜調整してください。