lightGallery

JavaScript

レスポンシブでタッチ対応のLightbox風ギャラリーを実装できるjQueryプラグイン「lightGallery」

lightGalleryというjQueryプラグインを使えば、レスポンシブでタッチにも対応したLightbox風のギャラリーを実装することができます。PC、スマホ、タブレットと様々なデバイスに最適化されるのでとても実用的ですね。前後の矢印でスライドしながら切り替えることができます。ちなみにオプションでフェードに設定することも可能です。

[ads_center]

lightGalleryの使い方

lightGalleryの使い方

JQuery lightGallery

実際のデモでは画像の他に動画も使われています。動画はYouTubeとVimeoをサポートしています。

使い方は、まずhead内にjQuery本体、プラグインファイル(JSとCSS)を読み込ませます。

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                    
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/lightGallery.js"></script>

続いてHTMLをマークアップ。ギャラリーに使う各要素をリスト化させます。liのdata属性には拡大時の画像を入れていき、li要素にはサムネイル画像を内包させます。

<ul id="lightGallery">
    <li data-src="img1.jpg">
        <img src="thumb1.jpg" />
    </li>
    <li data-src="img2.jpg">
        <img src="thumb2.jpg" />
    </li>
    ・・・中略・・・
</ul>

最後にlightGalleryを呼び出してあげれば完了です。

<script type="text/javascript">
$(document).ready(function() {
    $("#lightGallery").lightGallery();
});
</script>

オプションでは、モードの設定やスピード、ループ、オートなど色々なカスタマイズをすることができます。

ブラウザ対応はChrome、Safari、Firefox、Opera、IE7+、IOS、Android、windows phoneになります。

機能も豊富なので気になる方は是非チェックしてみて下さい。

関連記事

  1. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  2. jquery.resizeend

    JavaScript

    ウィンドウをリサイズした時にイベント発生できる「jquery.resizeend」

    jquery.resizeendは、ブラウザのウィンドウをリサイズした…

  3. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  4. 2013年上半期jQueryプラグインまとめ

    JavaScript

    2012年に紹介したjQueryプラグインのまとめ

    当ブログで2012年にご紹介したjQueryプラグインをまとめてみまし…

  5. jQuery Quick Modal
  6. JavaScript

    軽量で嬉しい!画像を拡大ズームしてくれるjQueryプラグイン「Leroy Zoom」

    Leroy ZoomというjQueryプラグインを使えば、画像を拡大ズ…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP