jQuery Lightbox
jQuery LightboxはAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。
jQuery Lightboxのダウンロード
それでは、こちらからJavaScriptを入手してください。
http://leandrovieira.com/projects/jquery/lightbox/
index.htmlを含むサイトサンプルがダウンロードされますので、「js」フォルダ内の全ファイルを先ほど作成した自分の「js」フォルダ内に保存し、「css」フォルダ内のファイルも自分の「css」フォルダに保存しましょう。また「image」フォルダの中にも表示に使用するアイコンが含まれているので、「image」フォルダを作り中身を保存します。
外部JavaScriptを読み込みたいときの手順は、「jQuery pngFix」で説明した通りです。
では、実際に使ってみましょう。
「鈴木智子のホームページのアクセスアップ講座」では、次のようにしました。
<head>部分
<!-- lightbox -->
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$('#gallery1 a').lightBox();
});
$(function() {
$('#gallery2 a').lightBox();
});
</script>
jQuery Lightboxの使用方法
<a>タグを<head>部分で設定したidを持つ<div>で括るだけです。
さらに異なるidの<div>で括るとグループ化されてグループ内画像でページ切換が出来たりします。
また「title="なぜ？なぜ広告？"」のように、title属性を付ければキャプションを付ける事ができます。
「鈴木智子のホームページのアクセスアップ講座」ではこうです。
<h2>単独の画像の場合</h2> <div id="gallery1"> <p> <a href="img/coding_javascript_lightbox2_01.jpg"> <img src="img/coding_javascript_lightbox2_01_s.jpg" alt="葉っぱ" width="100" height="75" /> </a> </p> </div> <h2>グループ化された画像の場合</h2> <div id="gallery2"> <p> <a href="img/coding_javascript_lightbox2_01.jpg" title="葉っぱ１"> <img src="img/coding_javascript_lightbox2_01_s.jpg" alt="葉っぱ１" width="100" height="75" /> </a> <a href="img/coding_javascript_lightbox2_02.jpg" title="葉っぱ２"> <img src="img/coding_javascript_lightbox2_02_s.jpg" alt="葉っぱ２" width="100" height="75" /> </a> <a href="img/coding_javascript_lightbox2_03.jpg" title="葉っぱ３"> <img src="img/coding_javascript_lightbox2_03_s.jpg" alt="葉っぱ３" width="100" height="75" /> </a> </p> </div>
「jQuery Lightbox サンプル」をご覧になってみて下さい。
どうです？
なかなか格好良いでしょう？
次に紹介するJavaScriptは、「SWFObject 2.2」と言って、フラッシュを使った時のSEOのためのものです。
