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. infiniteSlider2.js
  2. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  3. Jquery modal box plugin
  4. graphite

    JavaScript

    シンプルな棒グラフを生成できる「graphite」

    graphiteはシンプルな棒グラフを生成できるJavaScriptラ…

  5. Skippr

    JavaScript

    軽くて速いスライドショーを実装できるjQueryプラグイン「Skippr」

    SkipprというjQueryプラグインを使えば、軽くて速いスライドシ…

  6. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

最近の記事

  1. プラスシェル シティ04 フォールディングカメラケース
  2. enerpad AC-27KS
  3. KMS-160

アーカイブ

PAGE TOP