2006年1月 7日
Web2.0的画像表示を導入
「いただきもの」のページに、lightbox.jsを導入してみました。と言われても何のことだか判らないでしょうから、百聞は一見にしかず。とりあえず、上記ページに行って、画像サムネイルをクリックしてみてください。
どうです？ なかなかかっこいいでしょ？ これが、ちょっとのファイル修正と、小さなファイルの読み込みだけでできてしまうのです。
これを実現しているのが、lightbox.jsというJavascriptファイルなのです。
lightbox.jsはこちらのサイトから入手可能。ページ下のほうにある、4つのファイルをダウンロードしてください。あとは、書いてあるとおり（ただし、全部英語ですが……）にインストールして、HTMLをちょこっと修正すればOK。
日本語じゃないとわからねー、って人は、lightbox.js - Web2.0ライクな画像サムネイル生成 — OpenStratus Archiveを参照してください。
注意点としては、ダウンロードしたファイルは、HTMLファイルと同じディレクトリに置くこと。違うディレクトリに置きたい場合は、lightbox.js, lightbox.css の中の画像ファイルへのパスを修正する必要があります。
blogの方も修正してみました。MTの置換機能をつかって、「jpg"><img」という文字列を、「jpg" rel="lightbox"><img」に置換することで対応。
テクノラティ タグ：Javascript lightbox Web2.0
コメントする
以下のサイトや書籍等が参考になるかもしれません
Comment on "Web2.0的画像表示を導入"
Post a Comment
Trackback on "Web2.0的画像表示を導入"
このエントリーのトラックバックURL:
※ トラックバックを送信する際は、トラックバックspamフィルタの適用についてを熟読の上、送信をお願いします。この記事へのリンクの無いトラックバックは受け付けられません。
"Web2.0的画像表示を導入"へのトラックバックはまだありません。
"Web2.0的画像表示を導入"へのコメントはまだありません。