ユージック

jQueryでlightBoxを使うpluginの英文のサイトはこちら

実装はいたって簡単です。まずは元サイトでスクリプトとCSSをDLして外部リンクします。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.3.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.3.css" media="screen" />

便利になったポイントは従来であればaタグにrel属性でlightboxと指定していましたが、今回のjQueryで使うプラグインではjQueryの関数を使って色々な指定をすることができます。以下のようにどのようにlightboxを実装するか指定します。

<script type="text/javascript">
$(function() {
	
	$('a[@rel*=lightbox]').lightBox(); // rel属性でlightboxと指定しているaタグにlightboxを指定する。
	
	$('#gallery a').lightBox(); // 特定のIDの中のaタグにlightboxを指定する。
	
	$('a.lightbox').lightBox(); // lightboxというclassをつけたlightboxを指定する。
	
	$('a').lightBox(); //aタグすべてにlightboxを指定する。
	
});
</script>

そしてどのようにlightboxを表示するかコンフィグレーションの機能も実装しています。

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

コンフィグレーションの説明

• overlayBgColor - 背景の色を指定できます。
• overlayOpacity - 背景の透明度を指定できます。デフォルトは0.8です。
• imageLoading - ローディングのGIF画像を指定できます。
• imageBtnClose - 閉じるのボタンの画像を指定できます。
• imageBtnPrev - 戻るのボタンの画像を指定できます。
• imageBtnNext - 次へのボタンの画像を指定できます。
• containerBorderSize - 写真の枠のパディングの指定ができます。デフォルトは10。
• containerResizeSpeed - コンテナーのデュレイション(モーションの速度)を指定できます。デフォルトは400。
• txtImage - 画像のキャプションを指定できます。
• txtOf - 画像のキャプションで "of" を利用できます。