Welcartの商品画像とlightgallery.jsの組み合わせ事例

※こちらはWelcart 2.6以前の記事です。

2022年8月3日追記
Welcartはバージョン2.7にアップデートされました。
詳しくは公式ページへ=>Welcart 2.7 の変更点とカスタマイズへの影響について
下記の記事は旧バージョンのものです。ご了承ください。
　

はじめに

lightgallery.jsにはVer1とVer2があり、商用利用する場合はVer2は有料です。
Ver1公式サイトはこちら
Ver2公式サイトはこちら
　
最初の設定はlightgallery.js v1 基本の使い方、新しくなったlightgallery.js v2 基本の使い方を見てください。
lightgalleryの記事一覧はこちら
　

lightgallery.jsを使って、Welcartの商品画像をアルバム形式にする方法

商品のメイン画像とサブ画像がこんなふうに並んで、

画像のどれか１つをクリックすると大きくなります。

　
Welcartの画像登録におすすめのプラグインはこちら。
Image Uploader for Welcart
WordPress最新版には対応してないけど、動きます。（2021年11月2日時点）
　

wc_item_single.phpを編集

<div id="wel-gallery">

	<a id="gallery-main-thum" class="" data-src="<?php usces_the_itemImageURL(0, "", $post) ?>" >
		<?php usces_the_itemImage( 0, "500", "500", $post); ?>
	</a>

	<?php
	$imageid = usces_get_itemSubImageNums();

	foreach ($imageid as $id) :	?>

	<a class="thum-photo" data-src="<?php usces_the_itemImageURL($id, "", $post) ?>" >
		<?php usces_the_itemImage( $id, "100", "100", $post); ?>
	</a>

	<?php endforeach; ?>

</div>

style.cssを編集

#wel-gallery{
	max-width: 500px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	grid-gap: 10px;
}#gallery-main-thum{
	grid-column: 1 / -1;
}#wel-gallery img{
	width: 100%;
	height: auto;
	vertical-align: middle;
}

サイズの数字はお好みで変更してください。
display:grid;で並べて、grid-column: 1 / -1;で1枚目の画像だけ大きくしています。
　

設定ファイルlg-conf.jsの書き方。

Ver1の場合

lightGallery(document.getElementById('wel-gallery'), {
	thumbnail:true
}

Ver2の場合

let element = document.getElementById("wel-gallery");
lightGallery(element, {
	plugins: [lgThumbnail],
	thumbnail:true,
	galleryId:element.id
});

参考になりそうなTips

ACFとlightgallery.jsで無限に画像を追加する
Welcartの商品画像とlightgallery.jsの組み合わせ事例
lightgallery.jsの画像が1枚だけの場合サムネイルが表示されない問題
lightgallery.jsのサムネイル画像のサイズを小さくして動作を軽くする
Welcartの自作テンプレートが反映されない問題