コマースクリエイター未利用店舗様専用の記事です

商品一覧ページの設定

以下のURLのページのように、ウインドウサイズに合わせて横幅いっぱいにサムネール画像を並べることが可能になります。
http://sample.future-shop.jp/fs/fs2sample/c/LF_auter

サンプルソース

サンプルソースを、オリジナルCSSに貼り付けてご利用ください。

.layout_menu{padding-left:10px;}
.layout_table{width:100%}
.groupLayout br{display:none;}
#FS2_itemlayout_IHL2{text-align:center; width:150px;}
.FS2_AdditionalImageEnlargementSsize_Button{text-align:right;}
	#FS2_itemlayout_IHL2.gl_Item{
	padding:10px;
	margin:3px;
	border:none;
	background:#f8f8f8;
}
.FS2_AdditionalImage_Balloon_Tip {
	width:120px;
	height:80px;
	text-align:left;
	background-image:none;
	background:#fff;
	border:1px solid #ccc;
}

商品詳細ページの設定

以下のURLのページのように、ウインドウサイズに合わせて横幅いっぱいにサムネール表示エリアを広げることができます。
http://sample.future-shop.jp/fs/fs2sample/LF_auter/gd37

※レイアウトスタイルの「画像ホスティング用パターン」で、「パターンIH1」を選択していただく必要があります。

サンプルソース

サンプルソースを、オリジナルCSSに貼り付けてご利用ください。

$fsJq(document).ready(
function(){
$fsJq('div.FS2_additional_image_itemdetail_container_right').insertAfter('div.FS2_additional_image_itemdetail_container_left');
$fsJq('div.FS2_additional_image_container').insertAfter('div.FS2_additional_image_btn_thumbnail_container');
$fsJq('div.FS2_additional_image_container').width($fsJq('#FS2_itemlayout_IH1').width()-$fsJq('.FS2_additional_image_btn_thumbnail_container').outerWidth(true));
$fsJq('div.FS2_additional_image_container').width($fsJq('div.FS2_additional_image_container').width()-(Number($fsJq('div.FS2_additional_image_container').css('padding-left').replace( /[^-0-9\s]+/g, '' ).split( /\s+/ ))+Number($fsJq('div.FS2_additional_image_container').css('padding-right').replace( /[^-0-9\s]+/g, '' ).split( /\s+/ ))));
});