Lightbox.jsで画像を表示とアップロードの編集
最近よく見かけるサムネイル画像をクリックするとポップアップせずに、半透明の背景になり画像が表示されるLightboxをご紹介します。
まずは左の画像をクリックして体験してみてください。
表示された画像をもう一度クリックするか、画像右上の「X」もしくは「press X to close」をクリックすると戻ります。
１．lightbox.js のダウンロード
Lightbox JS のサイトから必要なファイルをダウンロードしてください。（2006.4現在 ver2.0）
ダウンロードする場所は、サイトの中間部の「DOWNLOAD:」のところです。
[ ダウンロードするファイル ]
・ lightbox.js ・ lightbox.css ・ overlay.png ・ loading.gif ・ close.gif
各ファイル名をクリックすると各ファイルの画面に移動します。
スクリプト（.js）、スタイルシート（.css）はリンク先のページを同じ名前で保存してください。
画像（.png .gif）は、画像上で右クリックして画像を保存してください。
（ドラックしてデスクトップに移動しても保存できます）
overlay.png が少し濃すぎるように感じたので、新しく作ってみました。ご自由に利用してください。Lightboxで利用する際は、ファイル名を「overlay.png」に変更してください。
２．ファイルをアップロード
lightbox.css以外のファイルをindex.html（もしくはindex.php）のあるディレクトリにアップロードします。
３．テンプレート、スタイルシートの編集
・テンプレートの編集
メインページ、カテゴリーアーカイブ、エントリー（個別）アーカイブの<head>～</head>の間に下記を追加してください。
<script type="text/javascript" src="<<$MTBlogURL$>lightbox.js"></script>
・スタイルシートの編集
lightbox.cssのソースをコピーし、ブログのスタイルシート（例：styles-site.css）に追加します。
これで準備は完了です。あとはアップロードした画像のHTMLに rel="lightbox" を追加するだけです。
例： <a href="http://****.jp/images/****.jpg" rel="lightbox" title="caption" >
<img width="250" height="150" border="0" align="left" alt="****" src="http://****.jp/images/****-thumb.jpg" />
title="caption" を挿入すると画像の説明文（caption）を入れることができます。captionの部分に画像の説明文を記入してください。
ここで画像をアップロードする度に rel="lightbox" を追加するのは面倒なので、アップロードしたときに rel="lightbox" がつくようにします。
４．CMS.pm の編集
MTのディレクトリの /lib/MT/App/ にあるCMS.pm をダウンロードしてきて、3604行目（MT3.2）4789行目（MT3.3）にrel="lightbox"を追加します。
<a href="$url " rel="lightbox"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
上書き保存して、上書きアップロードして終了です。
アップロード時の画像の設定は、「ポップアップ」ではなく「埋め込み」です。お間違えないように・・・
参照先：MovableType備忘録さん「画像アップロード時にrel属性を追加」
ご意見・ご感想 （4）
Xanaviさん、コメントありがとうございます。
良い情報が提供できたらと思います＾＾
技術情報提供のブログというより、わたし自身が忘れないようにするためのブログなんですけどね＾＾；
こちらもまた覗かせて頂きますね。ヨロシク
Posted by : magnet | 2006年06月09日 22:35
Comment Time / June 9, 2006
コメントいただきありがとうございます。
ＴＢささせていただきました Xanavi です。
ブログそのものにまだまだなれていなくて・・・
何といいますか・・・実はまだ下書きだったのに間違えて公開して保存してしまっていたのでした(^^;;;
これからもちょくちょく覗かせていただきますね。
では。
Posted by : Xanavi | 2006年06月09日 22:24
Comment Time / June 9, 2006
コメントありがとうございます＾＾
IEは、正常に表示されるときとされないときとあるようですよ。原因はわかりませんｗ
確かにIEには足ひっぱられますね。
Posted by : magnet | 2006年05月03日 20:27
Comment Time / May 3, 2006
こんにちわ^^
Lightbox JS の記事とっても参考になりました。
ですが、わたしの方では Firefox では確認できたのですが、IE では 普通に表示されてしまいました(汗
また IE かぁ…と思うと、ホントうんざりです。
では…。
Posted by : bzbell | 2006年05月03日 20:04
Comment Time / May 3, 2006