ひさーしぶーりーだとー
いうよりはーやくぅ
お高いグラスに目をそらあっすぅ
むーかしのーとーもーはー
いーまのともー
今回は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」を読み込みます。
パスなどは環境に合わせて変更してください。
[sourcecode language="javascript"]
[/sourcecode]
読み込みが完了したら、以下のような記述をば。
[sourcecode language="javascript"]
[/sourcecode]
恒例の「$(function)」を使って、ドキュメントの読み込みが完了するまで待機して、読み込み完了したら動いてね！という魔法をかけます。
続いてhtmlを。
jQuerylightBoxを埋め込みたいページに（ギャラリーをする予定のページ）、にまずはボックスを作成します。
[sourcecode language="html"]
[/sourcecode]
後は、このdivタグの中に、ギャラリーのサムネイル画像が入ります。
以下に一例を。
[sourcecode language="html"]
[/sourcecode]
ここで注意事項を。
aタグには必ず、画像へのパスを選択してください。
理由は、jQuery lightBox pluginでは「aタグのhrefを元に、でかい画像を出す」ためです。
なのでこれがないと、リンク先の画像が表示されませんのでご注意ください。
もちろんのこと、photosの中に写真がないと表示されません。
これで、設定が完了です。
実際に見てみると、こんな感じに！。
やっぱり時代はjQuery（個人的に）ですよ。
というかprototypeはなんかとっつきづらかったので触ってないだけですが・・・。