lightgallery.js

JavaScript

レスポンシブやタッチ対応などさまざまな機能を搭載したギャラリー実装「lightgallery.js」

lightgallery.jsは、さまざまな機能を搭載したlightbox風ギャラリーを実装できるスクリプトです。レスポンシブやタッチをサポートしているほか、マウスドラッグでの前後移動、YouTube、Vimeo、フルスクリーン、ズーム、キーボードナビゲーション……と、かなりの多機能っぷり。これだけの機能を備えつつ、jQueryなどを必要とせずに実装できるのがいいですね。

スライドショー、ズーム、フルスクリーンなどもできる

デモ

サムネイル画像をクリックすると、画像がスパッと拡大表示されます。画面両端に設置された矢印で画像を切り替えることが可能。

また、画面下部のナビゲーション、キーボード、マウスドラッグなどでも切り替えられます。

右上にはメニューアイコンが並んでおり、スライドショー、ズーム、フルスクリーン、SNSへのシェア、ダウンロードなど、いろんな機能を操作できるようになっています。

ギャラリーはレスポンシブにも対応しており、パソコンはもちろん、スマホやタブレットでも最適なレイアウトで表示します。実際にiPhoneで確認してみたところ、しっかり表示されました。

タッチ対応なので、スマホからでもサクサク画像を切り替えられます。

また、デモページにはサムネイル以外にも、YouTube/Vimeo Videos、HTML5、Transitions、Dynamic、Events、Methods、Iframe、Captionsなど、ほかにもたくさんのデモが用意されています。

lightgallery.js

関連記事

  1. Responsive jQuery Pop Up Gallery
  2. no-image

    JavaScript

    2枚の画像の違いを比較できるjQueryプラグイン「baSlider」

    baSliderはビフォー・アフターのような2枚の画像の違いを比較でき…

  3. Lightbox

    JavaScript

    jQuery依存なしのシンプルなライトボックス機能を実装できる「Lightbox」

    LightboxはjQueryに依存することなくシンプルなライトボック…

  4. jQuery Magnify

    JavaScript

    シンプルで軽量なズーム機能を実装できる「jQuery Magnify」

    jQuery Magnifyはシンプルで軽量なズーム機能を実装すること…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP