商品画像10枚表示 スマートフォン版有料テンプレート用

このページでは、レギュラーより上のプランにプランアップした際に、
レギュラーより上のプランで標準機能である商品画像10枚表示を行う為の、既存テンプレートの修正方法を説明しています。
商品画像10枚表示は、レギュラーより上のプランをご利用のショップ様のみとなります。それ以外のプランをご利用いただいているショップ様が、本修正を行いましても、
商品画像10枚表示は行えません。ご了承ください。2013年5月13日以降にダウンロードされたショップテンプレートには、本修正を行う必要はございません。

商品画像10枚表示用タグ追加方法 … スマートフォン版有料テンプレート用

対応方法は以下の2通りございます。どちらかの対応をお願いします。

■ 対応方法1:再度テンプレートを追加する 【※推奨】

■ 対応方法2:テンプレートの該当箇所を修正、または追加する

テンプレートの編集を行う場合は、【商品詳細】HTML・【共通】CSS の計2箇所を編集します。
使用するテンプレートを確認し、編集を行ってください。
» 各テンプレート修正内容へのリンク一覧はこちら


※修正タグを変更する位置が不明な場合は、ご利用中のテンプレートと同じテンプレートを追加していただき、
修正用タグが記述されている位置をご確認ください。

商品画像10枚表示用タグ追加手順

使用しているテンプレートを確認

【商品詳細】HTML に追加するタグは各テンプレート毎に異なります。対象のテンプレートをご確認ください。

タグの挿入箇所を確認

【テンプレート別挿入タグ一覧表】の、 <!-- 黄色いマークの文字列 --> が挿入箇所の目安となりますので、
文字列を【商品詳細】HTML 内にて検索します。

指定タグをコピー、挿入

・検索後、各テンプレートの追加位置をご確認いただき、 ピンクエリアの追加タグ を挿入してください。・テンプレートによっては、一部タグを削除していただいた後、タグを追加していただく必要がございます。
削除する必要のタグがある場合、 削除該当部分を グレーエリア で表示しています。
 グレーエリア 部分のタグを削除後に、 ピンクエリアの追加タグ 部分のタグを挿入してください。

・追加するHTMLタグには、画像を1枚ずつ追加するタグと、画像をまとめて出力するタグの2通りがございます。
どちらのタグをご利用いただいても、商品画像は表示されますので、
テンプレートのカスタマイズなど行っている場合は、カスタマイズに合ったHTMLタグをご利用ください。
※CSSは共通です。

■ 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;
  }

この記事は役に立ちましたか?
  • はい (6)
  • いいえ (0)
2018.02.26