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

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

使用方法 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!jQueryプラグイン「lightGallery」サンプル

sponsors

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

記事作成:
記事URL:

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