Slimbox 2の使い方

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

公式サイト

  • ※ このライブラリは、jQueryが別途必要です。
目次
  1. ダウンロードと設置
  2. JavaScriptおよびCSSの読み込み
  3. 適用方法
  4. キャプション
  5. オプション

ダウンロードと設置

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

JavaScriptおよびCSSの読み込み

次のHTMLをhead要素内に記述します。
CSSファイルとJavaScriptファイルのパスは適宜変更してください。

HTML

適用方法

a要素にモーダルウィンドウで表示する画像をhref属性を設定、さらにa要素にrel="lightbox"属性を追加します。

HTML

次のJavaScriptコードを記述します。

JavaScript

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

サンプル

キャプション

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

HTML

サンプル

オプション

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

JavaScript

オプション 初期値 説明
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」のキーボードのキーコード割り当て