使いやすくて、かっこいい！！ギャラリーが作れるぜ！
僕が今回適用してみたサイトのページは、これまたZEN DISTROのライダー写真ページです。
僕の写真もたくさんあるので、見てみてください。
で、これは写真のサムネール画像をクリックするとモワッて感じで写真が出てくるんだ。
別窓が開くわけでもなく、開いているブラウザ上で画像が展開するので、見ているユーザーは使いやすくて楽チン。
大元のサイトは英語で書いてあるんだけど
インストール方法をざっくり紹介しますね。
１．まずはダウンロードをします。ここをクリックしてDownLoadを英語を探してください。
２．ZIPファイルを解凍した、フォルダ（css,js,images)を自分にコピーしてください。
３．このギャラリーを実現したい、ページのヘッダーに以下のように、JavaScript,CSSをインクルードしてください。
<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" />
３．CSS（lightbox.css）の中をチェックしてくださいね。 next.gif , loading.gif , close.gifのパスが正しいかをチェックして修正してくださいね。
OK!ここまでおりかえし地点です。
４．画像へのリンクに rel="lightbox" を以下のように加えてください。
<a href="images/image-1.jpg" rel="lightbox" title="画像の説明">image #1</a>
画像の説明を書き足したいときは title=”ほげほげ” で何か書いてください。
５．もし、複数の画像を一つのグループで次から次へと表示したいときは、以下のようにrel="lightbox[roadtrip]" のように書いてください。
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
こんな感じです。
例はこんな感じです。
