ライトボックス
キーボードナビゲーションとタッチ操作に対応したフルスクリーン画像オーバーレイ。 単一画像ビューアー、または前へ/次へナビゲーション、カウンター表示、 サムネイルグリッド付きのギャラリーとして利用できます。
シングル
オプションのキャプション付きで単一画像をフルスクリーンオーバーレイで表示
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████ ██████ ██████████ ██
██
█████ █ ████████████
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_single_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ █████████ ██
███████ █████████████
██████████████████████████████████
██████████████
██████████ ████████████████████████ ████
lightbox_single_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
███████████ ████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████ █ ████
██████████████ █ ███████████████ ██ ██
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
ギャラリー
前へ/次へナビゲーション、カウンター、キーボード操作対応の画像ギャラリー
_lightbox.html.erb
███ ███████ █████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████ ██
██
███████████ █ ██████████ █ █████ █ ████ ██████████ ████ █████████ ██ ███ ████████ █████████████ ██ ██ █ █████████
██
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ ███████████████ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
lightbox_gallery_component.html.erb
████ ██████████████████████████
███████████████████████████████ ███████████ ███
█████████████████████████████ ████ ███
██████████ █████████████████ ████
███ █████████ ████ ██
████ ██████████ ████████████ ████
██ ██████████████████████ ██ ███████ ██████ ██
███████ █████████████
██████████████████████████████████
lightbox_gallery_component.rb
█ ██████████████████████ ████
█████ ████████████████████████ █ ███████████████████
███████████ ████████ ██████████████ ██████████████ █████
███ ███████████████████ █████████████ █████ █████████████ █████ █████ ██████ ██████████
███████ █ ██████
█████████████ █ ████████████
█████████████ █ ████████████
█████ █ ████
lightbox_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ███████████ ████████ ██████████ ██████████ ████████████
██████ ██████ █ █
███████ ██████
████████ █ █████ ███████ ████████ █ ██
█████ █ █████ ████████ ████████ █████ █
█
変更履歴
- v1.0.0: Initial release with single and gallery styles
- Fullscreen overlay with backdrop
- Keyboard navigation (Escape, Arrow keys)
- Touch swipe support for gallery
- Optional captions and image counter
- Preloads adjacent images