Bloosh Company

Development>WordPress

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

, , , , ,

lightgallery.jsを使って、Welcartの商品画像をアルバム形式にする方法。
 
商品のメイン画像とサブ画像がこんなふうに並んで、

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

 
lightgallery.jsの基本の使い方はこちら→
lightgallery.js v1 基本の使い方
v2を使う場合は商用利用になるのでライセンス料の支払いが必要です。
 
Welcartの画像登録におすすめのプラグインはこちら。
Image Uploader for Welcart
WordPress最新版には対応してないけど、動きます。(2021年11月2日時点)
 
まずは、HTML。
wc_item_single.phpを編集します。
※Welcartテンプレートについての記事はこちら→
Welcartの自作テンプレートが反映されない問題


<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>

 
次に、JSファイル。lightgallery v1の書き方です。


<script type="text/javascript">
	lightGallery(document.getElementById('wel-gallery'), {
		thumbnail:true
	});
</script>

これだけ!他にもいろいろ設定できるよ。
 
最後にCSS。


#wel-gallery{
	max-width: 500px;
	margin: 0 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枚目の画像だけ大きくしています。
これだけでレスポンシブ対応なんですよ!
もちろんメディアクエリでいろいろ変更もできます。

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

<<次の記事

JavaScriptを使った文字サイズスイッチの作り方

前の記事>>

Welcart商品画像のフィルターフック

Tweets by blooshcompany