Blog

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>

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