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. Tagify

    JavaScript

    Vanilla JSを用いた軽量のタグ入力機能を実装できる「Tagify」

    TagifyはVanilla JSを用いた軽量のタグ入力機能を実装でき…

  2. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  3. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  4. no-image

    JavaScript

    シンプルでカスタマイズも簡単なパララックスエフェクト実装「parlx.js」

    parlx.jsはシンプルでカスタマイズも簡単なパララックスエフェクト…

  5. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  6. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP