商品画像10枚表示 スマートフォン版有料テンプレート用
このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
商品画像10枚表示は行えません。ご了承ください。2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。
- 商品画像10枚表示 PC版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 PC版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 モバイル版有料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版無料テンプレート用 アップデートマニュアルはこちら
- 商品画像10枚表示 スマートフォン版有料テンプレート用 アップデートマニュアルはこちら
商品画像10枚表示用タグ追加方法 … スマートフォン版有料テンプレート用
対応方法は以下の2通りございます。どちらかの対応をお願いします。
■ 対応方法1:再度テンプレートを追加する 【※推奨】
■ 対応方法2:テンプレートの該当箇所を修正、または追加する
テンプレートの編集を行う場合は、【商品詳細】HTML・【共通】CSS の計2箇所を編集します。
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら
※修正タグを変更する位置が不明な場合は、ご利用中のテンプレートと同じテンプレートを追加していただき、
修正用タグが記述されている位置をご確認ください。
商品画像10枚表示用タグ追加手順
使用しているテンプレートを確認
【商品詳細】HTML に追加するタグは各テンプレート毎に異なります。対象のテンプレートをご確認ください。
タグの挿入箇所を確認
【テンプレート別挿入タグ一覧表】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細】HTML 内にて検索します。
文字列を【商品詳細】HTML 内にて検索します。
指定タグをコピー、挿入
・検索後、各テンプレートの追加位置をご確認いただき、 ピンクエリアの追加タグ を挿入してください。・テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア 部分のタグを削除後に、 ピンクエリアの追加タグ 部分のタグを挿入してください。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
グレーエリア 部分のタグを削除後に、 ピンクエリアの追加タグ 部分のタグを挿入してください。
・追加するHTMLタグには、画像を1枚ずつ追加するタグと、画像をまとめて出力するタグの2通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。
■ テンプレート別挿入タグ一覧表 スマートフォン版有料テンプレート 【 商品詳細 】HTML
■ Paper and Wood
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ Unknown(pink)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ Unknown(green)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ Unknown(red)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ Unknown(yellow)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ JapanStyle
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: url(http://img.shop-pro.jp/s_tmpl_img/20/flick_bg.png); text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ fluffy
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #F5F0E9; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ オフィススタンダード(RED)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ オフィススタンダード(BLACK)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ オフィススタンダード(BLUE)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ComfortableTime
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: url(http://img.shop-pro.jp/s_tmpl_img/15/flick_bg.gif); text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ JIGGY
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #fff; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ハリウッドヒルズ
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #FED7DB; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #B29C9E; box-shadow: inset 0 0 10px 0 #B29C9E; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ジュエリー&ウォッチ(グレー)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #333; text-align: center; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ジュエリー&ウォッチ(ブラック)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #333; text-align: center; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ファッション(ブルー)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ファッション(ホワイト)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ファッション(オレンジ)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ファッション(ピンク)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ カスタム(ピンク)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #FEF0F7; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #DCD2D7; box-shadow: inset 0 0 10px 0 #DCD2D7; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ カスタム(オレンジ)
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #FFF3E2; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #D3CDC3; box-shadow: inset 0 0 10px 0 #D3CDC3; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
■ ファッションサテライト
商品詳細HTML - 画像を1枚ずつ追加する場合のタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
商品詳細HTML - 画像をまとめて出力するタグ
削除タグ 追加タグ
<script type="text/javascript"> $(function() { (function images() { var itemWidth = $('#flick_itemimage > li').width(); var $demo = $('#images'); var $pointer = $demo.find('.pointer span'); var flipsnap = Flipsnap('#images ul', { distance: 320, itemWidth: itemWidth }); flipsnap.element.addEventListener('fsmoveend', function() { $pointer.filter('.selected').removeClass('selected'); $pointer.eq(flipsnap.currentPoint).addClass('selected'); }, false); })(); }); </script> <article id="prd_dtl"> <div id="topicpass"> <ul> <li><a href="./">ホーム</a></li> <{if $bid_name != ""}> <li>><a href="<{$bid_link}>"><{$bid_name}></a></li> <{/if}> <{if $sid_name != ""}> <li>><a href="<{$sid_link}>"><{$sid_name}></a></li> <{/if}> </ul> <{section name=cnt loop=$group_breadcrumb_list}> <ul> <li><a href="./">ホーム</a></li> <{section name=num loop=$group_breadcrumb_list[cnt].group_breadcrumb}> <li>> <a href="<{$group_breadcrumb_list[cnt].group_breadcrumb[num].link_url}>"> <{$group_breadcrumb_list[cnt].group_breadcrumb[num].name}></a></li> <{/section}> </ul> <{/section}> </div> <section> <{if $product.id != ""}> <h1><{$product_name}></h1> <{if $product.img_url != "" || $product.ot1_url != "" || $product.ot2_url != "" || $product.ot3_url != ""}> <{if $product.img_url != "" || $otherimg_num != 0}> <div id="images"> <div class="img"></div> <ul class="img_th"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> </ul> <div class="flick"> <{if $product.img_url != ""}><{assign var="itemimage_cnt" value=$otherimg_num+1}><{else}><{assign var="itemimage_cnt" value=$otherimg_num}><{/if}> <{assign var="Data4" value=$itemimage_cnt*320}> <ul id="flick_itemimage" style="width: <{$Data4}>px"> <{if $product.img_url != ""}><li><img src="<{$product.img_url}>"></li><{/if}> <{if $product.ot1_url != ""}><li><img src="<{$product.ot1_url}>"></li><{/if}> <{if $product.ot2_url != ""}><li><img src="<{$product.ot2_url}>"></li><{/if}> <{if $product.ot3_url != ""}><li><img src="<{$product.ot3_url}>"></li><{/if}> <{if $product.ot4_url != ""}><li><img src="<{$product.ot4_url}>"></li><{/if}> <{if $product.ot5_url != ""}><li><img src="<{$product.ot5_url}>"></li><{/if}> <{if $product.ot6_url != ""}><li><img src="<{$product.ot6_url}>"></li><{/if}> <{if $product.ot7_url != ""}><li><img src="<{$product.ot7_url}>"></li><{/if}> <{if $product.ot8_url != ""}><li><img src="<{$product.ot8_url}>"></li><{/if}> <{if $product.ot9_url != ""}><li><img src="<{$product.ot9_url}>"></li><{/if}> </ul> </div> <div class="pointer"> <{section name=cnt loop=$itemimage_cnt}> <span<{if $smarty.section.cnt.first }> class="selected"<{/if}>></span> <{/section}> </div> </div> <{/if}>
共通CSS
削除タグ 追加タグ
/*********************** prd_dtl ***********************/ #images { padding: 10px 0; background: #EFEFEF; text-align: center; -webkit-box-shadow: inset 0 0 10px 0 #999; box-shadow: inset 0 0 10px 0 #999; } #images .img { margin-bottom: 10px; } #images .img img { max-width: 90%; } #images li { display: inline; margin: 0 1%; } #images li img { max-width: 20%; max-height: 80px; } #images img { max-width: 90%; } #images .flick { width: 320px; } #images .flick ul li { width: 320px; margin-bottom: 0; } #images .flick ul li img { max-width: 90%; margin-bottom: 0; } #images .flick ul li a { display: inline; margin: 0; }
2018.02.26