jQueryに依存しない、軽量、高機能、おしゃれな画像ギャラリーを実装することができるJSライブラリを紹介します。
lightgallery.jsは、画像ギャラリーを実装することができるJSライブラリです。
レスポンシブ、タッチデバイスに対応しており、画像の他にYouTubeやVimeo、HTML5の動画をギャラリーに表示することができます。ズーム、フルスクリーン表示、ダウンロード、ソーシャル共有など必要な機能が揃っています。
軽量で高速なアニメーション表示、スムーズなレスポンシブ表示が特徴です。
jQueryに依存せず単独で使用することができます。
対応ブラウザはIE9以上です。
デモページで動作の確認ができます。
lightgallery.jsの特徴
- レスポンシブ対応
CSSだけでレスポンシブ機能を実装しているのでとてもフレキシブルです。JavaScriptを使ったレスポンシブ機能よりもスムーズな表示です。 - タッチデバイス対応
タブレットやスマートフォンなどのタッチデバイスに対応しています。前後の画像にスワイプで遷移することができます。 - モジュール
サムネイル、フルスクリーン、ズームなど機能ごとにモジュール化されています。不要なモジュールをオフにしたり、自分のオリジナルモジュールの追加することができます。 - カスタマイズ
オプションが豊富に用意されており、簡単にカスタマイズをすることができます。SASSで見た目を変更することも可能です。 - YouTube、vimeoのサポート
YouTube、vimeoの動画ギャラリーに対応しています。サムネイル画像の自動読み込み、自動再生、自動停止などが可能です。 - 高速なアニメーション
Hardware-Accelerated CSS3を使った、高速で、スムーズなアニメーションが使われています。 - ズーム、フルスクリーン
ダブルクリックで実寸サイズでの表示ができます。ズームイン、ズームアウト、フルスクリーン表示が可能です。 - HTML5動画
MP4、WebM、Oggなど、すべての拡張子のHTML5動画に対応しています。HTML5の動画プレイヤー、Video.jsが使われています。 - ソーシャル共有
画像や動画をTwitter、Facebook、Pinterest、Google Plusのソーシャルサービスに個別のURLで共有することができます。 - 画像の読み込み制御
デフォルトでは高速化のために3枚の画像だけが読み込まれます。ナビゲーションが進むのに応じて追加の画像が読み込まれます。 - レスポンシブ画像
ビューポートを使った、異なるサイズの画像読み込みに対応しています。srcsetを使って、高解像度の画像を読み込むことも可能です。 - ブラウザサポート
IE9以上のモダンブラウザに対応しています。
lightgallery.jsのデモ
- サムネイル
- YouTube、Vimeo
- HTML5動画
- 画像遷移のアニメーション
- ダイナミック表示
- イベント
- メソッド
- iframe
- キャプション
- 固定サイズ
- Facebookのコメント付きギャラリー
- 画像遷移のイーシング
- 画像ごとのユニークURL
- ソーシャル共有
lightgallery.jsの使い方
ダウンロード
GitHubの右側にある「Clone or Download」ボタンからダウンロードすることができます。
CSSの読み込み
<head>セクションでCSS「lightgallery.css」を読み込みます。
<head> <link type="text/css" rel="stylesheet" href="css/lightgallery.css" /> </head>
JSの読み込み
</body>閉じタグの前で、JS「lightgallery.min.js」「lg-thumbnail.min.js」「lg-fullscreen.min.js」を読み込みます。
<body> .... <script src="js/lightgallery.min.js"></script> <!-- lightgallery plugins --> <script src="js/lg-thumbnail.min.js"></script> <script src="js/lg-fullscreen.min.js"></script> </body>
HTML
<div>タグの中に、リンク付き画像を用意します。
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
...
</div>
スクリプト実行
セレクタで対象のHTML要素を指定して、スクリプトを実行します。
<script>
lightGallery(document.getElementById('lightgallery'));
</script>