アーカイブ

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>

外部リンク