SmallStyle

_ Lightbox JS でキャプション表示が可能に

Lightbox JS がアップデートされて，以前取り上げた title 属性の追加が加えられたり，キャプション表示や，Close ボタンの表示が可能になりました．このサイトでも少し前から Lightbox JS を使って画像を表示させているのですが，tDiary の image_ex.rb をまた少し手を加えて，キャプション表示を可能にしてみました．

image_ex.rb では日記を書くときに，代替テキストを指定しますが，これをキャプションに利用します．修正はいたって簡単で，以前，Lightbox JS に対応させるために手を加えた image_ex.rb の，rel="lightbox" のあとに，title="#{alt}" を挿入します．

%Q[<a href="#{image_url}#{list[id.to_i]}" rel="lightbox" title="#{alt}"><img class="#{place}" src="#{image_url}#{list[id2.to_i]}" alt="#{alt}"></a>]

これで画像ポップアップ時に，画像下部にキャプションが表示されるようになります．css ファイル (lightbox.css) には以下を追記しておきました．

#lightboxCaption{
   font-size: 0.8em;
   padding-top: 0.4em;
   text-align: center;
   text-decoration: underline;   }

#lightbox img{ border: none; }
#overlay img{ border: none; }

Close ボタンはなんとなく好きになれなかったので表示はしていません．画像をクリックしてもらうと，キャプション表示がされるようになっているのを確認できます．キャッシュが残っていると以前のままの表示になるかもしれません．その場合はスーパーリロード (Ctrl + F5) を試してみてください．