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. Playful Little Tooltip Ideas
  2. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  3. Smooth Scroll behavior polyfill
  4. elmenu

    JavaScript

    レスポンシブ対応で軽量なハンバーガーメニューを実装できる「elmenu」

    elmenuはレスポンシブに対応した軽量のハンバーガーメニューを実装す…

  5. Owl Carousel 2

    JavaScript

    美しいレスポンシブなカルーセルスライダーを実装できる「Owl Carousel 2」

    Owl Carousel 2は、美しいレスポンシブなカルーセルスライダ…

  6. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

最近の記事

  1. COMOLIの製品染ナイロン アノラックとトラックパンツ
  2. WH-XB900N
  3. Eufy RoboVac L70 Hybrid
  4. cheero Smart USB Charger 48W CHE-320

アーカイブ

PAGE TOP