ECサイトや通販サイトのような商品画像ビューアを設置するjQuery

自サイト内で商品を売りたいという方は、最近ではとても多いです。カート機能のレンタルやWordPressなどのCMSの浸透で、その敷居はとても低くなっていると思います。そんなわけで、私もECサイト通販サイトでよく見かける「商品画像ビューア」を作ってみることにしました!

スポンサーリンク

jQueryの準備

今回はjQueryを利用して制作していきますので、その準備をします。既にjQueryが使える環境であれば問題ないのですが、よくわからない場合にはheadタグ内に以下を追記してください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

これは、jQueryのライブラリーをGoogleから参照するためのコードです。Googleさんに感謝ですね。

jQueryのコード

意外にも短くスッキリとしたコードで実現ができました。

  <script>
    $(function() {

      $('.thumbnails img').each(function(i) {
        $(this).wrap('<a></a>');
        $(this).closest('a').attr('href', '#view' + i);
      });

      $('.viewer img').each(function(i) {
        $(this).attr('id', 'view' + i);
      });

      $('.thumbnails a').click(function(e) {
        e.preventDefault();
        $('.viewer img').removeAttr('class');
        $(this.hash).addClass('active');
        return false;
      });

      $('.thumbnails a:eq(0)').trigger('click');
    });
  </script>

 

HTML

<div class="viewer">
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image0' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image1' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image2' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image3' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image4' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image5' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image6' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image7' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image8' ,true); ?>" />
  <img src="<?php echo get_post_meta($post->ID , 'uploaded_image9' ,true); ?>" />
</div><!-- /.viewer -->

<div class="thumbnails">
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image0' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image1' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image2' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image3' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image4' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image5' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image6' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image7' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image8' ,true); ?>" width="95px" height="95px" /></div>
  <div class="one-thumbnail"><img src="<?php echo get_post_meta($post->ID , 'uploaded_image9' ,true); ?>" width="95px" height="95px" /></div>
</div><!-- /.thumbnails -->

このコードでは、WordPressのカスタムフィールドにて画像URLを登録/表示する仕様となっていますが、この辺は適宜変更をお願いします。カスタム投稿タイプ作成の記事を参照いただければ、詳細があります。

CSS

.viewer {
  width: 500px;
  height: 500px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  position: relative;
}

.viewer img {
  display: block;
  height: auto;
  max-width: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
  -webkit-visibility: hidden;
  visibility: hidden;
}

.viewer img.active {
  opacity: 1;
  -webkit-visibility: visible;
  visibility: visible;
  z-index: 100;
}


.thumbnails {
  width: 1000px;
  height: 95px;
  margin-top: 5px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  list-style: none;
  font-size: 0;
}

.one-thumbnail {
  background: #ccc;
  position: relative;
  overflow: hidden;
  width: 95px;
  height: 95px;
  margin-top: 0px;
  margin-right: 5px;
  margin-bottom: 0px;
  margin-left: 0;
  float: left;
}

商品画像が10枚の仕様でコーディングしていますので、この辺の仕様が変わった場合にはバランスを整えるようにしてください。

動作デモ

wordpress カスタム投稿タイプ 表示テンプレート作成このような見た目のサイトとなりました。実際に動作を確認したい場合にはhttps://web-shizuoka.net/shop/448にアクセスしてください。よくある感じの商品画像ビューアが完成しました。

WEB制作承ります

WordPressだとか、jQueryって一体なんなんだ!!という方も多いと思います。今回のカスタマイズにもう少し手を加えればECサイト、通販サイトが実現できます。制作はいつでも承ります。ご依頼はお問い合わせフォームからお願いいたします。

コメント