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になります。

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

パララックス効果を画像に実装できるjQueryプラグイン「Parallax ImageScroll」前のページ

レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」次のページ

関連記事

  1. FrameScrub
  2. jExcel

    JavaScript

    Excelと互換性のあるスプレッドシートを埋め込めるjQueryプラグイン「jExcel」

    jExcelは、ブラウザにExcelと互換性のあるスプレッドシートを埋…

  3. stacky

    JavaScript

    スライドダウン・スライドアップしてコンテンツを整理できるjQueryプラグイン「stacky」

    stackyというjQueryプラグインを使えばコンテンツをスライドダ…

  4. FractionSlider

    JavaScript

    各要素ごとにスライドアニメーションを設定できるjQueryプラグイン「FractionSlider」…

    複数の各要素ごとにスライドアニメーションを設定できるjQueryプラグ…

  5. jQuery-ResizableColumns

    JavaScript

    テーブルのカラムをリサイズできる「jQuery-ResizableColumns」

    jQuery-ResizableColumnsは、テーブルのカラムをリ…

  6. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP