テーマを刷新したのでLightbox 2 を導入してみました。
写真を見る時にJavascript読み込んでブワブワーってなるやつ。
これ入れるだけでちょっとシャレた感じになるのがいいですね。
導入は簡単ですが今後のためにも覚え書きです。
1. 必要なファイルをダウンロードする。
Lightbox 2にてDownloadより必要なファイルをダウンロードする。
エントリー時の最新バージョンは2.04です。
ダウンロードした「lightbox2.04.zip」を解凍しておきます。
2. ファイルの編集をする。
デフォルトの状態では画像がうまく表示されませんので以下のファイルを編集します。
編集するのは「lightbox2.04」フォルダ内の「css」→「lightbox.css」と同じく「lightbox2.04」フォルダ内の「js」→「lightbox.js」の2つです。
まずは「lightbox.css」をTeraPadなどのテキストエディタで開きます。
その16行目と17行目にある
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
の青字を以下の赤字のようにフルパスに変更します。
#prevLink:hover, #prevLink:visited:hover { background: url(http://(画像を保存しているフォルダまでのURL)/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://(画像を保存しているフォルダまでのURL)/images/nextlabel.gif) right 15% no-repeat; }
続いて「lightbox.js」ですが、49行目と50行目にある
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
の青字を同じく以下の赤字のようにフルパスに変更します。
fileLoadingImage: 'http://(画像を保存しているフォルダまでのURL)/images/loading.gif',
fileBottomNavCloseImage: 'http://(画像を保存しているフォルダまでのURL)/images/closelabel.gif',
両ファイルとも上書き保存しておきます。
3. ファイルをアップロードする。
先ほど解凍した「lightbox2.04」フォルダごとサーバにアップします。
中には必要ない画像とかも入ってますけど面倒臭かったら全部アップしといて問題ないと思います。
4. HTMLファイルを編集する。
次にHTMLファイルの<head>～</head>内に以下のソースを書き加えます。
<script type="text/javascript" src="http://(「js」フォルダまでのURL)/js/prototype.js"></script>
<script type="text/javascript" src="http://(「js」フォルダまでのURL)/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://(「js」フォルダまでのURL)/js/lightbox.js"></script>
以上でLightboxを使うための準備は終了です。
5. 画像アップ時にすること。
エントリーの投稿時にLightboxを使用したい画像リンクに以下のように「rel=”lightbox”」と書き加えます。
<a href="画像のURL" rel="lightbox"><img src="画像のURL" alt="画像の説明など" /></a>
同じ投稿内で複数の画像をグルーピングしたい場合には
<a href="画像のURL" rel="lightbox[sample]"><img src="画像のURL" alt="画像の説明など" /></a>
という風に「lightbox」の後に「[sample]」を書き加えます。
sampleの文字列は半角英数字だったら何でもいいです。
画像の撮影日（ex. 20080927）とか投稿のキーワード（ex. hanabi）とか任意のものを付け加えてください。
これで上のサンプル画像のようにブワブワーとなって画像が画面に表示されるはずです。
簡単なので皆さんも是非やってみてくださいｗ
