最近たまにみかけるWeb2.0っぽい画像の表示方法。
気になったので調査。
Lightbox JS
http://www.huddletogether.com/projects/lightbox/
script.aculo.usと同様JavaScriptのライブラリですね。
で、作ったサンプルがこちら(画像をクリック)
やり方はJavaScriptの使用を宣言して、呼び出すだけとなっています。
宣言側
<script type=”text/javascript” src=”../lab/lightbox/lightbox.js”></script>
<link href=”../lab/lightbox/lightbox.css” rel=”stylesheet” type=”text/css” >
呼び出し側
<a href=”../lab/lightbox/060228.jpg” rel=”lightbox” title=”my caption”>
<img src=”../lab/lightbox/060228.jpg” width=”10%” height=”10%”>
</a>
大きい画像を表示させたい場合には面白いですが、商品が並んでいてクリック毎にこんな表示されたら
ちょっとうざい気がしますね。
—-
参考
小粋空間:Lightbox JS で画像を表示する
http://www.koikikukan.com/archives/2006/01/13-235556.php
hbkr:Lightbox JSにエフェクトをかけてみる
http://ieiriblog.jugem.jp/?eid=816
Lightbox Plus
http://serennz.cool.ne.jp/sb/sp/lightbox/index_ja.html