タッチ操作できる商品詳細ページを作る

最近のネット利用率はスマートフォンの方が多いんだそうで、ネットショップもスマートフォン重視で対応を考えていく必要があります。

具体的にはタッチ操作で使いやすいユーザーインターフェースをカラーミーショップの商品詳細ページに実装します。スワイプ（画像送り）、ピンチアウト・ピンチイン（画像の拡大縮小）で操作できるようになります。

以下の二つのプラグインを利用しています。
・bxSlider（サムネイル、大画像）
・PhotoSwipe（タップ時に画像拡大）

デモページのQRコード（スマートフォンで閲覧してください）。
bxSlider+PhotoSwipeデモ

スマホ閲覧時のデモ画面と簡単な説明

bxSliderでサムネイル画像とスライドショーを実装しています。
スワイプで画像送りが可能になります。

サムネイル画像を省略して、??/??というような枚数表示や●（ドット）にすることも可能です。このほうが省スペースでスマートフォン向きです。

他のECサイトやスマートフォンアプリなどをみていると、矢印ボタンやサムネイル画像は非表示にしているところも多いです。画面が狭いこともあって邪魔になるという判断でしょう。これらはショップごとに検討していただいて調整可能です。

デモでは縦長画像を正方形で切り抜く表示方法にしています。下記の拡大機能があるので切り落としても問題ないという判断です。

大画像をタップすると、PhotoSwipeに移行します（画像の拡大・縮小機能）。

PhotoSwipeでは、ピンチアウト・ピンチインで画像の拡大・縮小ができます。タップしたりスワイプしたりもできます。挙動は一般的なタッチ操作そのものなので戸惑うことはありません。

それに加えて、右上のアイコンで拡大・縮小、SNSシェア機能、閉じるボタンがデフォルトでついています（デバイスによって左の2つは非表示の場合があります）。

機能も十分で、操作感もとても良い印象です。