imagelightbox

JavaScript

レスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」

imagelightboxは、レスポンシブに対応したタッチフレンドリーな画像ギャラリーを実装することができるjQueryプラグインです。シンプルなデザインながらもオプションが豊富なので、多彩なカスタマイズが可能です。

imagelightbox

デモ

デモページにはさまざまなタイプのサンプルが用意されています。サムネイル画像をクリックすると、拡大画像が表示されます。画像をクリックしたり左右の矢印キーを操作したりすると、次の画像に切り替えることが可能です。

アニメーション付きで画像が切り替わるのがとても素敵ですね。フェードイン/フェードアウトによるアニメーションで、美しくエレガントに切り替わっていきます。

オーバーレイと共に表示されるもの、クローズボタン付き、キャプション付き、ナビゲーション付き、画面両端に左右矢印が表示されるもの、などなどいろんなタイプのデモを見ることができます。

また、imagelightboxはタッチフレンドリーになっているところもポイントです。実際にiPhoneでデモに触れてみたところ、しっかり動作を確認できました。拡大画像の表示や画像の切り替えなど、パソコンだけではなくスマホでも快適に操作できるのは助かりますね。

便利なオプションもたくさん用意されているので、好みに合わせたカスタマイズも可能です。矢印、ボタン、キャプション、キーボード、ナビゲーション、オーバーレイなどの有効・無効を指定できたりアニメーションスピードの数値を設定できたり、さまざまなカスタマイズが可能です。

imagelightbox

関連記事

  1. Switch

    JavaScript

    iOSスタイルのシンプルなチェックボックスを実装できる「Switch」

    Switchは、シンプルでパワフルなiOSスタイルのチェックボックスを…

  2. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  3. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  4. Create a month picker jQuery plugin
  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのeachメソッドのお勉強

    今回はjQueryのeachメソッドを使ってみました。なんかとても便利…

  6. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

最近の記事

  1. FE 35mm F1.8
  2. RONIN-SC
  3. プラスシェル シティ04 フォールディングカメラケース

アーカイブ

PAGE TOP