多機能/スマホ/動画対応のギャラリーJavaScript!jQueryプラグイン「lightGallery」

モーダルにする際にスマートフォンではどうしよう、レスポンシブウェブデザインではどう表現すればよいか・・・。
と悩んでいる人は、jQueryプラグインのlightGalleryを選択肢のひとつに入れてみてはいかがでしょうか。
レスポンシブにも対応し、サムネイル表示や、動画対応、フルスクリーンなど多様な機能を持ち合わせています。
もちろんモバイル向けにタッチでの操作もOKです。

sponsors

使用方法

lightGalleryからファイル一式をダウンロードします。

<link type="text/css" rel="stylesheet" href="lightgallery.css" /> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src="lightgallery.js"></script>
  <script type="text/javascript" src="lg-thumbnail.js"></script>
  <script type="text/javascript" src="lg-fullscreen.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });
</script>
また、fontsフォルダもアップしてください。
あとは表示させたい場所に下記のように記述すれば完成です。

<div id="lightgallery">
  <a href="拡大画像">
      <img src="サムネイル画像" />
  </a>
  <!-- 以下、画像分記載 -->
</div>
また、動画の場合はlg-video.jsを追加で読み込み、拡大画像部分を動画のURLにすればOKです。
YouTube、Vimeoには対応済みです。

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors