Slimbox 2の使い方 Slimbox 2

Slimbox 2の使用方法をご紹介しています。
Slimbox 2は別ウィンドウ(ポップアップ)ではなく、ウィンドウ内で画像や写真などをモーダルウィンドウとして表示するJavaScriptライブラリです。

公式サイト

ダウンロードと設置

こちらからダウンロードして解凍します。
解凍後、css、jsディレクトリを任意の場所に設置します。

JavaScriptおよびCSSの読み込みと設定

以下を<head>内に記載します。
パスは環境により変更してください。

適用方法

a要素にrel="lightbox"を追加します。

なお、同ページ内にlightboxを適用したリンクが複数ある場合、「PREV」「NEXT」ボタンは
マウスオーバー時必ず表示されます。

サンプル

キャプション

左下に、画像のキャプションを表示する場合は、a要素にtitle属性を追加します。

サンプル

オプション

オプションは以下のようなカタチで設定します。

オプション 初期値 説明
loop false 最初または最後に達した場合にそれぞれループの有無
overlayOpacity 0.8 オーバーレイの透明度
overlayFadeDuration 400 オーバーレイの速度
resizeDuration 400 画像が読み込まれる瞬間のリサイズ速度
resizeEasing swing イージング
initialWidth 250 初期のボックスの横幅
initialHeight 250 初期のボックスの縦幅
imageFadeDuration 400 画像のフェードインの速度
captionAnimationDuration 400 キャプションの出現速度
counterText Image {x} sur {y} 左下に表示されるイメージのインデックステキスト
closeKeys [27, 88, 67] 「CLOSE」のキーボードのキーコード割り当て
previousKeys [37, 80] 「PREV」のキーボードのキーコード割り当て
nextKeys [39, 78] 「NEXT」のキーボードのキーコード割り当て