タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

no-image

simplelightboxはレスポンシブ対応でタッチフレンドリーなlightboxを実装できるjQueryプラグインです。スワイプジェスチャーで前後の画像を快適に切り替えていくことができます。パソコンからの閲覧だけでなくスマホなどでも快適に動作するのがいいですね。

simplelightbox

デモ

デモではいくつかのサムネイル画像が並べられており、いずれかの画像をクリックすると拡大画像が表示されます。左右の両端には矢印アイコンが設置されています。ここから前後の画像に切り替えることが可能です。モバイル版ではスワイプジェスチャーでサクサクと前後の画像へ切り替えられます。さらにキーボードもサポートされていることから、キーボードの左右矢印キーからでも画像の切り替えが可能です。

また、左上には画像の総数と現在表示されている画像の番号が記載されているので、現在どの位置にいるのかを把握しやすくなっています。

拡大画像を閉じる場合は右上にあるバツ印や画像の外側をクリックすると最初のサムネイル画像一覧ページに戻ります。

拡大時には背景に白っぽいオーバーレイがかかるので、画像にも集中しやすいのがいいですね。

オプションもかなり種類があり、先ほどのオーバーレイの有無やスピナーやナビの有無、それからキャプション、スワイプ、クローズ、アニメーションスピード、ループなどなど、多彩なカスタマイズが可能になっています。

オプションだけでなく、イベントやメソッドもいろいろ用意されているので、気になる人はぜひチェックしてみてください。というわけで、レスポンシブに対応したタッチフレンドリーなlightboxを実装できるjQueryプラグイン「simplelightbox」の紹介でした。

simplelightbox

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives