MENU

jQueryプラグイン「lightgallery」の使い方

lightgalleryの使い方

画像と動画のギャラリーを実装できるプラグインを探していて、「lightgallery」というプラグインを使ってみました。

実装したかった動きに一番近かったので、採用しました。他にもいろいろなプラグインがありましたが、検索ヒットも多く、また使用方法の記事もたくさんあったので、こちらを使用することにしました。

ダウンロードは、こちら。Githubからダウンロードできます。

わたしが作成したデモはこちら

JQueryのプラグインは、slick-sliderしかやったことがなかったので、苦戦しました。
今回のプラグインに関する記事もたくさんあったけど、ファイルのディレクトリが記事によってさまざまだったので、とても混乱しました。
同じような状況で、このプラグインを使おうと思っている方の参考になればうれしいです!

CONTENTS

lightgallery使い方

STEP
ファイルをダウンロードする

https://github.com/sachinchoolur/lightGallery

Github上から、ダウンロードできます。わたしはzipでダウンロードしたので、その方法で説明していきます。

STEP
必要なファイルを選択して、記述する

ダウンロードしたzipを解凍すると、たくさんのファイルがあります。
demoファイルには、デモページのソースが入っているので、参考になります。
distに必要なファイルが格納されているので、見てみましょう。


最低限必要なファイルはこちら

  • lightgallery-all.js
  • lightgallery.css

さらに、JQueryを呼び出させるのをお忘れなく!
https://code.jquery.com/

ディレクトリ階層は、自分の環境と合わせて記載ください。

<!-- cssの呼び出し -->
<link rel="stylesheet" href="css/lightgallery.css">

  <!--jQueryを呼び出す -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <!--lightGalleryのスクリプト minファイルの方が容量が小さくなります-->
  <script src="js/lightgallery-all.min.js"></script>

これで準備はOK!

STEP
HTMLの記述の仕方

Githubにも記述の仕方がのっているので、参照してみてください。

lightGallery
404 Page not found lightGallery supports features such as, Animated thumbnails, Pinch / double tap to zoom, HTML5 videos, YouTube, VImeo, videos, social media share, Rotate, fullS...

わたしは下記のように記述をしてみました。

        <ul id="lightgallery" class="gallery-box">
          <li data-src="img/img01.jpg"><a href=""><img src="img/img01.jpg" alt=""></a></li>
          <li data-src="img/img01.jpg"><a href=""><img src="img/img01.jpg" alt=""></a></li>
          <li data-src="img/img01.jpg"><a href=""><img src="img/img01.jpg" alt=""></a></li>
          <li data-src="https://www.youtube.com/embed/KyQRdD4Ok_8">
            <a href="#"><img src="img/img01.jpg"></a>
          </li>
          <li data-src="https://www.youtube.com/embed/KyQRdD4Ok_8">
            <a href="#"><img src="img/img01.jpg"></a>
          </li>
          <li data-src="https://www.youtube.com/embed/KyQRdD4Ok_8">
            <a href="#"><img src="img/img01.jpg"></a>
          </li>
        </ul>

data-srcという記述で、画像や動画を呼び出すようになっていると思われます。

STEP
JSを記載する

必要なファイルを呼び出し、HTMLが書き終わったら、最後にjsの記述をします。

idは自由に決めても問題ないです。

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

ステップ2~4は、順番に行う必要はありません。個人的にわかりやすいと思った手順で説明をしています。

どうでしょうか?無事に実装できたでしょうか?わたしはちゃんと動くまでに、けっこう時間かかりました。。

今回悩んだのは、動画の実装です。ローカル環境だと再生がされなくて、頭を抱えていましたが、サーバーにアップすると、ちゃんと動きました!初歩的なことかもしれませんが、同じように悩まれた方がいれば、よければ試してください。

オプションについて

いろいろとオプションもあるようですが、わたしが試したのはモーダルウィンドウに表示される、オプションの表示、非表示だけです。

公式のサイトにオプションについて、まとめられているので参照してください。

lightGallery
404 Page not found lightGallery supports features such as, Animated thumbnails, Pinch / double tap to zoom, HTML5 videos, YouTube, VImeo, videos, social media share, Rotate, fullS...

モーダルウィンドウのオプション表示について

上記のように、デフォルトで右上にたくさんのオプションが表示されています。
こちらを今回は、非表示にしました。

        // モーダルウィンドウのオプション非表示 
        share: false,                   
        rotate: false,         
        rotateLeft: false,       
        rotateRight: false,      
        flipHorizontal: false,
        flipVertical: false,
        hash: false,
        zoom: false,
        actualSize: false,
        fullScreen: false,
        autoplayControls: false,
        download: false,

他にもたくさんのオプションがあるので、いろいろ試してみてください。

さいごに

今回の実装でプラグインの導入手順がつかめたような気がします。

個人的に、導入されている記事を探すよりかは、githubに記載している内容を熟読したほうが早いように思いました。

ただし、すべて英語記載なので、理解するのに時間はかかりそうですが。。。

今後は、さくっと導入できるようになりたいものです。

lightgalleryの使い方

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
CONTENTS
閉じる