はじめに
lightgallery.jsにはVer1とVer2があり、商用利用する場合はVer2は有料です。
Ver1公式サイトはこちら
Ver2公式サイトはこちら
最初の設定はlightgallery.js v1 基本の使い方、新しくなったlightgallery.js v2 基本の使い方を見てください。
lightgalleryの記事一覧はこちら
lightgallery.jsでは、サムネイルを表示する場合、小さいサイズの画像を指定できます。
そして、WordPressでは、wp_get_attachment_thumb_url($id)という関数を使えば、サイズを指定して画像を取得することができます。
組み合わせると、
<a href="大きい画像のURL" data-exthumbimage="<?php echo wp_get_attachment_thumb_url($id); ?>">
</a>このように、属性にdata-exthumbimage=サムネイルサイズの画像URLと指定します。
lightgallery.js Ver2の場合
上記に続いて、下記のように設定。
HTMLではなくlg-conf.jsを編集します。
lightGallery(document.getElementById('gallery'), {
plugins: [lgThumbnail],
thumbnail:true,
exThumbImage: 'data-exthumbimage'
});
一番最後の行のように、exThumbImage: "data-exthumbimage"と指定します。
補足
WordPressは、画像をアップロードするとき、オリジナルのサイズだけでなく、自動で大・中・小にリサイズして保存してくれます。
大・中・小の実際の大きさは、管理画面の設定⇒メディアから設定できます。
さらに、functions.phpに追加すれば、任意のサイズを指定することができます。
注意点として、管理画面等からサイズ変更しても、アップロード済の画像はリサイズされません。
アップロード済みの画像をまとめてリサイズできるプラグインがあるので安心してね。
参考になりそうなTips
ACFとlightgallery.jsで無限に画像を追加する
Welcartの商品画像とlightgallery.jsの組み合わせ事例
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
