Lightbox jsというスクリプトをご存じでしょうか。ブログやホームページなどにイメージのサムネイル（縮小された画像）を貼り付けておいて、そこをクリックすると元の大きさの画像が格好良くホワッと出てきます。
通常はあっけなく大きなイメージが貼り付けられているページがパッと開くだけですが、このLightboxを使用するだけで、何だか別の写真のような感じがするほど格好が良くなります。なかなか言葉では説明を仕切れないので、ぜひ下の写真をクリックしてみてください。（2013/12/26追記：LightBoxのプラグインを削除しましたので、リンクをクリックしてもLightBoxの効果は現れません）
いかがでしたでしょうか。インストールについては、こちら（MovableType備忘録: サムネイルをLightbox JSで表示してみる）の記事を参考にインストールをしました。
しかし、一点だけ、うまく動作しないところがありました。スタイルシートに下記の構文を入れるところなのですが、うまくインポートをしてくれていないようです。ちなみにスタイルシートの一番下に入れておきました。
@import url(<$MTBlogURL$>lightbox/css/lightbox.css) screen;
原因がわからなかったので、インポート先のファイルの中身を直接開いて、スタイルシートの一番下のところに貼り付けておきました。
また、CMS.pmの修正でもソースプログラムのバージョンが違うためか指示された行番号の場所には直すべきものがありませんでした。行頭のhrefの文字列でソースを検索した結果、それらしい場所があったので、そこにrel=”lightbox”を加えることで現在はうまく動作しています。最近では導入しているサイトが本当に増えていることも判るように、非常にお薦めです。
WordpressでLightboxを使用したいときにはプラグインを入れるだけで動作するのですが、Movabletypeの場合は手順が複雑になってしまうのは残念です。
（2008/06/02追記）
MovableType 4.2にアップデートしたところ、画像を投稿する際に自動的に「rel=”lightbox”」が挿入されなくなってしまいました。そこで、プログラムソースを修正して、自動挿入されるようにします。修正するプログラムは下記のファイルです。
lib/MT/Asset/Image.pm
この中で、
’＜a href=”%s”＞＜img alt=”%s” src=”%s” %s %s /＞＜/a＞’,
の部分を下記のようになおし、rel=”lightbox”を挿入します。（＜＞は全角に直してあります）
’＜a href=”%s” rel=”lightbox”＞＜img alt=”%s” src=”%s” %s %s /＞＜/a＞’,
こちら（nasu – blog – Lightbox JS v2.0をMovable Type 4に設置する。）の記事を参考にさせていただきました。
コメント