2006/10/27

LightboxJS 2.0  導入。

tia70_05a.gif

20050311.jpg

LightboxJS 2.0 とは何か? という話題は出尽くしてるのでどうでも良い感じがしますが一応。
サムネールをクリックすると、画面がかわらずにリンク先画像を上の様に表示してくれるというものです。

厳密には、画像のリンクに対して、上のような表示をしてくれるスクリプトです。

以前導入しようとしたときは、サムネからサイズをおおきくした画像の表示をポップアップにしていたので、これをOFFにするにはどうしたものかなぁ……なんてぼーっと考えていたんですが、埋め込みリンクにすればポップアップ用のHTMLはきださないじゃん! とか今更になって気づきました。

かなりうっかりですがそれはいつも通りなのでおおめにみて! ね! 見て!

ということで、設置は思っていたより簡単に済みました。具体的に何をしたかというと、参考にさせていただいたサイトそのままです。数カ所見た中で一番わかりやすかったのを紹介。

trial and error~試行錯誤~ さんの Lightbox JS 2.0 設置

見やすいですし、特に補足も全く入らない感じです。グループにしてスライドショーのやり方等もわかりやすく書いてくださっています。
しかし、このままでは投稿するときにいちいち画像のリンクに「rel="lightbox"」と入れなくてはならないので、それは面倒。
ちょこっとMTのシステムをいじることで、サムネを作る場合の画像リンクのURLに自動でつけることができました。

CMS.pmを編集します。
場所は、mt/lib/MT/App/CMS.pm
MT-3.33jaでは下記の通りに修正です。

4803行目
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
      ↓↓
<a href="$url" rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

これ一カ所のみでとりあえず大丈夫っぽいです。
なにかエラーがあったらそのうち修正を……。

修正したらアップロード。画像のアップロードでサムネを作るときにの埋め込みのリンクに「rel="lightbox"」が追加されるようになります。

やっぱ自動にすると楽で良いですね~(´ヮ`)'`,、'`,、 かといって更新がまめになるわけではない。罠。


CMS.pm改造に参考にさせていただいたサイト。
Movable Type 備忘禄:サムネイルをLightbox JSで表示してみる

Comments (1)

lightbox.js のてすと

コメントを投稿

Trackbacks

このエントリーのトラックバックURL: