jQueryでlightBoxを使うplugin
2007年10月16日
jQueryでlightBoxを使うpluginをご紹介します。lightBoxはprototype.jsを併用するJavascriptのスライドショーを実装する有名なライブラリですが、今回はjQueryで利用できます。かつ高機能です。
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” を利用できます。