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. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  2. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  3. Lazy Load

    JavaScript

    画像の読み込みを遅らせてスクロールに合わせて表示させるjQueryプラグイン「Lazy Load」

    画像の読み込みを遅らせて表示させることができるjQueryプラグイン「…

  4. desoSlide

    JavaScript

    サムネイル付きのナビが素敵なスライダーを実装できるjQueryプラグイン「desoSlide」

    desoSlideというjQueryプラグインを使えば、サムネイル付き…

  5. 2013年下半期jQueryプラグインまとめ

    JavaScript

    2013年下半期に紹介したjQueryプラグイン68選まとめ

    今年も残すところあとわずかとなりました。今年もたくさんのjQueryプ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP