jQueryに依存しない、軽量、高機能、おしゃれな画像ギャラリーのJSライブラリ「lightgallery.js」

jQueryに依存しない、軽量、高機能、おしゃれな画像ギャラリーを実装することができるJSライブラリを紹介します。

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のデモ

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>

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 5,017