【Javascript】jQueryを使ったlightbox

Tweet

Category JavaScript / Tagged jQuery 2010/05/16

使用例

こちら

ダウンロード

http://leandrovieira.com/projects/jquery/lightbox/

使い方

よくあるjQueryのプラグイン同様、以下のような感じで。

<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox();
    });
</script>

設定できる項目とデフォルト値は以下のとおり。

// * オーバーレイするレイヤーの設定
// オーバーレイするレイヤーの色
overlayBgColor: '#000',
// オーバーレイするレイヤーの透明度（0.0から0.9まで）
overlayOpacity: 0.8,

// * 操作に関する設定
// 次へ、前へのボタンの表示、非表示
fixedNavigation: false,

// * 画像に関する設定
// それぞれ、ロード中のアイコン、前へのボタン、次へのボタン、閉じるのボタン、ブランクの画像
imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: 'images/lightbox-btn-prev.gif',
imageBtnNext: 'images/lightbox-btn-next.gif',
imageBtnClose: 'images/lightbox-btn-close.gif',
imageBlank: 'images/lightbox-blank.gif',

// * lightboxの表示に関する設定
// スタイルシートを変更して、#lightbox-container-image-box のpaddingを変更したら、この値も変えなさいとのこと
containerBorderSize: 10,
// boxがアニメーションする時間をミリ秒で指定
containerResizeSpeed: 400,

// * lightboxの文字表示に関する設定（Image 2 of 8 などの）
// "Image"に該当するテキストの指定
txtImage: 'Image',
// "of"に該当するテキストの指定
txtOf: 'of',

// * キーボード操作に関する設定
// lightboxを閉じるときのキー。Xキーでも閉じれる。
keyToClose: 'c',
// 前へのキー
keyToPrev: 'p',
// 次へのキー
keyToNext: 'n'