すでに有名になっている、画像アルバムに使えるJavaScriptを使ってみた。
Lightbox JS v2.0 : http://www.huddletogether.com/projects/lightbox2/
まるでFLASHのような出来映え。しかも簡単。
ダウンロードした中身（js / css /images）を適宜アップロード。
その際、アップロードした場所によっては62行目と63行目でパス指定された画像が表示されないため、相対パスを絶対パスに変更しておく必要があることも。
で、マニュアルのとおりJavaScriptとCSSファイルの指定をヘッダに記述。Movable Typeの場合、テンプレートに以下を追記すればOK。場所はヘッダ内ならたぶんどこでも可。
<!– LightBox Start –>
<script type=”text/javascript” src=”[パス名]/js/prototype.js”></script>
<script type=”text/javascript” src=”[パス名]/js/scriptaculous.js?load=effects”></script>
<script type=”text/javascript” src=”[パス名]/js/lightbox.js”></script><link rel=”stylesheet” href=”[パス名]/css/lightbox.css” type=”text/css” media=”screen” />
<!– LightBox End –>
[パス名]のところは各ファイルへの相対or絶対パスを記述。
いよいよ画像サムネール＆アルバムを作るには、以下のようなHTMLを記述するだけ。
<a href=”image.jpg” rel=”lightbox[group]”>[リンク元]</a>
aタグのところには実際に表示させたい画像パスを、[group]のところには任意のグループ名を、[リンク元]lのところにはリンク元を、それぞれ表示させればOK。これで画像アルバム完成。Excelか何かで元になるHTMLソースを管理して、貼り付けると作成はかなり楽。
作ってみたのはこちら。参考になれば。
http://www.morishima.com/masahiro/blog-archives/000967.html
これ、簡単なわりにクオリティが高い。本当はクリック元のサムネールもきちんと作ったりすれば良いのだろうけれど、面倒くさいのでそのままwidth / heightのリサイズだけで逃げている。オンマウスでサムネール拡大、とかimageのborderをCSSで指定するとか、もう少し見栄えをチューンナップすることはできそう。
しばらくは、死蔵されていた旅行の写真でもせこせこアップロードしてみようかな。
参考にしたサイト：
・Lightbox2.02でWeb2.0風に（Syunsui::徒然ブログ）
・Lightbox2 JS（OGIN’s このごログ）
・『Lightbox JS v2.0』の導入例