[jQuery]プラグイン　jQueryでLightbox

ひさーしぶーりーだとー

いうよりはーやくぅ

お高いグラスに目をそらあっすぅ

むーかしのーとーもーはー

いーまのともー

今回はjQueryのプラグイン「jQuery ligthBox pulgin」を紹介します。

lightBoxというと、prototype.jsが使われていますが、こっちだと、なんや、使い方がようわからへんなぁ。

という方もいらっしゃるかと思います。

そんな場合は、jQuery ligthBox pulginを使うと意外と簡単にいけたりします。

使い方

まずは、「jQuery ligthBox pulgin」本家から「ｚｉｐ」と書いてるアイコンからファイルを拾います。

拾ったファイルを解凍すると、以下のファイルが現れます。

• index.html
• images/
• js/
• css/
• photo/

使い方はいつもどおりに、「jquery.js」を読み込んでから、「jquery.lightbox-0.5.js」を読み込みます。

パスなどは環境に合わせて変更してください。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

読み込みが完了したら、以下のような記述をば。

$(function() {
$('#gallery a').lightBox();
});

恒例の「$(function)」を使って、ドキュメントの読み込みが完了するまで待機して、読み込み完了したら動いてね！という魔法をかけます。

続いてhtmlを。

jQuerylightBoxを埋め込みたいページに（ギャラリーをする予定のページ）、にまずはボックスを作成します。

後は、このdivタグの中に、ギャラリーのサムネイル画像が入ります。

以下に一例を。

<ul>
<li><a href="photos/01_big.jpg"><img src="photos/01_thumb.jpg" alt="" /></a></li>
<li><a href="photos/02_big.jpg"><img src="photos/02_thumb.jpg" alt="" /></a></li>
<li><a href="photos/03_big.jpg"><img src="photos/03_thumb.jpg" alt="" /></a></li>
</ul>

ここで注意事項を。

aタグには必ず、画像へのパスを選択してください。

理由は、jQuery lightBox pluginでは「aタグのhrefを元に、でかい画像を出す」ためです。

なのでこれがないと、リンク先の画像が表示されませんのでご注意ください。

もちろんのこと、photosの中に写真がないと表示されません。

これで、設定が完了です。

実際に見てみると、こんな感じに！。

やっぱり時代はjQuery（個人的に）ですよ。

というかprototypeはなんかとっつきづらかったので触ってないだけですが・・・。