ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする

, , ,

はじめに

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のサムネイル画像のサイズを小さくして動作を軽くする

lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #JavaScript #ギャラリー #軽量化 #lightgalleryjs

作者の似顔絵

秋田市在住のプログラマーです。
プログラミングを始めて18年、まだまだ日々勉強。調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。