Lightbox JS v2.0でクールなアルバムを

Lightbox JS v2.0でクールなアルバムをすでに有名になっている、画像アルバムに使える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』の導入例

Similar Posts:

カテゴリー: A:Diary パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です