ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

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の商品画像をアルバム形式にする方法

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

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

 
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の自作テンプレートが反映されない問題

Welcartの商品画像とlightgallery.jsの組み合わせ事例 #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #css #grid #画像 #welcart #lightgalleryjs #imageuplorderforwelcart

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク