imagelightbox

JavaScript

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

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

imagelightbox

デモ

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

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

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

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

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

imagelightbox

Dependent / Cascading Select List with jQuery Select2選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading Select List with jQuery Select2」前のページ

テキストエリア(textarea)などで行番号を追加できるjQueryプラグイン「bcralnit.js」次のページbcralnit.js

関連記事

  1. Create a month picker jQuery plugin
  2. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  3. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

  4. Image Figure Caption effects
  5. Navi.js

    JavaScript

    ナビゲーションとコンテンツが連動して切り替わるjQueryプラグイン「Navi.js」

    ナビゲーションとコンテンツが連動して切り替わる便利なjQueryプラグ…

  6. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP