画像と動画のギャラリーを実装できるプラグインを探していて、「lightgallery」というプラグインを使ってみました。実装したかった動きに一番近かったので、採用しました。他にもいろいろなプラグインがありましたが、検索ヒットも多く、また使用方法の記事もたくさんあったので、こちらを使用することにしました。ダウンロードは、こちら。Githubからダウンロードできます。わたしが作成したデモはこちら。JQueryのプラグインは、slick-sliderしかやったことがなかったので、苦戦しました。今回のプラグインに関する記事もたくさんあったけど、ファイルのディレクトリが記事によってさまざまだったので、とても混乱しました。同じような状況で、このプラグインを使おうと思っている方の参考になればうれしいです!CONTENTSlightgallery使い方STEPファイルをダウンロードするhttps://github.com/sachinchoolur/lightGalleryGithub上から、ダウンロードできます。わたしはzipでダウンロードしたので、その方法で説明していきます。STEP必要なファイルを選択して、記述するダウンロードしたzipを解凍すると、たくさんのファイルがあります。demoファイルには、デモページのソースが入っているので、参考になります。distに必要なファイルが格納されているので、見てみましょう。最低限必要なファイルはこちらlightgallery-all.jslightgallery.cssさらに、JQueryを呼び出させるのをお忘れなく!https://code.jquery.com/ディレクトリ階層は、自分の環境と合わせて記載ください。src="js/lightgallery-all.min.js"></script>これで準備はOK!STEPHTMLの記述の仕方Githubにも記述の仕方がのっているので、参照してみてください。fullS...わたしは下記のように記述をしてみました。</ul>data-srcという記述で、画像や動画を呼び出すようになっていると思われます。STEPJSを記載する必要なファイルを呼び出し、HTMLが書き終わったら、最後にjsの記述をします。idは自由に決めても問題ないです。});</script>ステップ2~4は、順番に行う必要はありません。個人的にわかりやすいと思った手順で説明をしています。?無事に実装できたでしょうか?わたしはちゃんと動くまでに、けっこう時間かかりました。今回悩んだのは、動画の実装です。ローカル環境だと再生がされなくて、頭を抱えていましたが、サーバーにアップすると、ちゃんと動きました!初歩的なことかもしれませんが、同じように悩まれた方がいれば、よければ試してください。オプションについていろいろとオプションもあるようですが、わたしが試したのはモーダルウィンドウに表示される、オプションの表示、非表示だけです。公式のサイトにオプションについて、まとめられているので参照してください。fullS...モーダルウィンドウのオプション表示について上記のように、デフォルトで右上にたくさんのオプションが表示されています。こちらを今回は、非表示にしました。false,他にもたくさんのオプションがあるので、いろいろ試してみてください。さいごに今回の実装でプラグインの導入手順がつかめたような気がします。個人的に、導入されている記事を探すよりかは、githubに記載している内容を熟読したほうが早いように思いました。すべて英語記載なので、理解するのに時間はかかりそうですが。今後は、さくっと導入できるようになりたいものです。@mangata1031よかったらシェアしてね!URLをコピーしました!URLをコピーしました!異業種から入社して、あっという間の半年。気がつけば、制作会社に入社して1年。この1年を振り返ります。【Vue.js】JSONデータを読み取って、検索機能を実装。元貿易の事務員からフロントエンドエンジニアへ。登山にはまり、長野へ移住をして、現在はフルリモートで大阪のWEB制作会社に勤務。【Vue.js】JSONデータを読み取って、検索機能を実装。(1)人気記事ニュース欄でよくみるレイアウトコーディングコーディングjQueryプラグイン「lightgallery」の使い方コーディングブログをはじめて、3カ月。【Vue.js】JSONデータを読み取って、検索機能を実装。komamenote.閉じるCONTENTS閉じる。