はじめに
lightgallery.jsにはVer1とVer2があり、商用利用する場合はVer2は有料です。
Ver1公式サイトはこちら
Ver2公式サイトはこちら
lightgalleryの記事一覧はこちら
lightgallery.jsが新しくなった
大きな変更点として、商用サイトで使う場合は有料になりました。
個人で使う場合はこれまで通り無料で使えるみたいです。
Ver.1の構成のまま、読み込んでるライブラリをアップデートしてみたんですが、動きませんでした。
Ver1の解説記事をベースにしているので、先に目を通してください🙏
最新ソースコード
まずは、GitHubに行って、最新ライブラリ等をゲット。
lightGallery/dist/の中を見ます。
まず必要なのは下記2つのファイル。
- lightgallery.min.js
- css/lightgallery.css
サムネイル機能を使いたい場合 ⇒
- plugins/thumbnail/lg-thumbnail.min.js
- css/lg-thumbnail.css
ハッシュ機能（同じページに複数ギャラリー）を使いたい場合 ⇒
- plugins/thumbnail/lg-hash.min.js
あとはfontディレクトリをダウンロードして、WordPressのサーバーのテーマフォルダがあるディレクトリにアップロード。
HTML構成
ここはあまり変化ありません。
でも新しく便利な属性が追加されたので見てみてね。
<div id="gallery">
<a href="img/pic1.jpg">
<img src="img/pic1_thum.jpg" />
</a>
<a href="img/pic2.jpg">
<img src="img/pic2_thum.jpg" />
</a>
...
</div>
設定ファイルlg-conf.js
let element = document.getElementById("gallery");
lightGallery(element, {
plugins: [lgHash, lgThumbnail],
thumbnail:true, //サムネイル機能を使う場合
hash:true, //複数設置する場合
galleryId:element.id
});
ポイントはplugins: [lgHash, lgThumbnail]のところです。Ver1ではなかったヤツです。
開発者さんありがとうございます🙏
参考になりそうなTips
ACFとlightgallery.jsで無限に画像を追加する
Welcartの商品画像とlightgallery.jsの組み合わせ事例
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
