アーカイブ

2008 年 12 月 のアーカイブ

jQuery lightbox plugin

2008-12-18

jQuery lightbox plugin

Web制作の際、使いどころを間違わなければバッチリとキマるLightboxですが、prototype.js ベースなので jQueryと併用する場合にはコンフリクト回避を行う必要がありました。

jQuery で lightbox を使用する plugin、その名もjQuery lightbox plugin です。

1
2
3
4
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-setting.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox.css" media="screen" />

などで、必要な Javascript と CSS を読み込みます。
また、下記のような指定ができます。

1
2
3
4
5
6
7
8
<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>

jquery.lightbox-setting.js

html 上に色々と書いてしまうのもアレなので、上記の設定をを行うために勝手に作った js ファイルです。下記のような指定をしておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
$(function() {
$(’a[@rel*=lightbox]).lightBox({ //rel属性でlightboxと指定しているaタグにlightboxを指定する。
overlayBgColor: ‘#000′, //背景の色を指定できます。
overlayOpacity: 0.6, //背景の透明度を指定できます。デフォルトは0.8。
imageLoading: ‘http://www.head-t.com/common/lightbox/loading.gif’, //ローディングの画像を指定できます。
imageBtnClose: ‘http://www.head-t.com/common/lightbox/close.gif’, //閉じるのボタンの画像を指定できます。
imageBtnPrev: ‘http://www.head-t.com/common/lightbox/prev.gif’, // 戻るのボタンの画像を指定できます。
imageBtnNext: ‘http://www.head-t.com/common/lightbox/next.gif’, //次へのボタンの画像を指定できます。
containerBorderSize: 10, //写真の枠のパディングの指定ができます。デフォルトは10。
containerResizeSpeed: 350, //コンテナーのデュレイション(モーションの速度)を指定できます。デフォルトは400。
txtImage: ‘No.’, //画像のキャプションを指定できます。
txtOf:/’ //画像のキャプションで "of" を利用できます。
});
});
</script>