リアルコマース スタッフブログ

Real Commerce株式会社スタッフブログ

CLOSE

makeshopの商品詳細ページで、商品画像をスライドショーで表示させる

Fashonテンプレートで紹介されましたので、既にご存知の方も多いと思われますが、商品画像と複数画像をスライドショーで表示させる方法を確認します。

商品画像の表示方法を変更する

通常であらば、[IMAGE]や[RESIZE_IMAGE_?]で出力する画像を[MAIN_IMAGE]と[THUMBNAIL]で表示させます。
[MAIN_IMAGE]と[THUMBNAIL]の関係性を推測、あるいはSPサイトの商品詳細ページの作りからも想定が可能ですので順を追って見てゆきます。

スライドショーに必要な部品を読み込み

makeshopで利用しているbxsliderのパーツを読み込みます。

<script type="text/javascript" src="/js/jqueryplugin/makeshop_bxslider/4.1.1/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/jqueryplugin/makeshop_bxslider/4.1.1/jquery.bxslider.css">

商品画像部分とサムネイルをhtmlに表示させる

実際に商品画像とサムネイル部分を表示させます。

<div id="photo">
      [MAIN_IMAGE]
      [THUMBNAIL]
</div>

bxsliderを実行させる

次に、bxSliderを実行させるアクションを記述します。

<script type="text/javascript">
  $(function(){
    $('.M_imageMainList').bxSlider({
      mode: 'fade',
      useCSS: false,
      pagerCustom: '.M_imageThumbnail'
    });
  });
</script>

CSSに関しては、それぞれ適宜編集を行ってください。また、編集を行う際は、必ずバックアップを取ってから行ってください。

 

この記事をシェアする