商品を360度回転できる画像ビューワーを簡単に実装できるスクリプト -JS Cloudimage 360 View

商品の画像を複数枚用意することで、商品を360度ぐるぐる回転できる画像ビューワーを簡単に実装できるスクリプトを紹介します。

操作はかなり快適で、単体で動作するスクリプトです。

JS Cloudimage 360 View
JS Cloudimage 360 View -GitHub

• JS Cloudimage 360 Viewの特徴
• JS Cloudimage 360 Viewのデモ
• JS Cloudimage 360 Viewの使い方

JS Cloudimage 360 Viewの特徴

JS Cloudimage 360 Viewは商品の画像を複数枚用意することで、バーチャルツアーを提供できるシンプルでインタラクティブなJavaScriptライブラリです。
サポートブラウザは、IE9, 10, 11を含む、すべてのモダンブラウザです。

商品はユーザーが360度回転させることができ、拡大にも対応しています。

JS Cloudimage 360 Viewのデモ

デモではさまざまな実装例を楽しめます。

デモページ
左: 72枚の画像、右: 36枚の画像

デモページ
左: 下部にビューサークル、右: box-shadow付き

コードベースで触ってみたい人には、Sandboxも用意されています。

Code Sandbox

JS Cloudimage 360 Viewの使い方

Step 1: 画像の用意

10度（または5度）ずつずらして撮影した商品画像を用意します。ファイル名には必ず「index」を含めます（image-{index}.jpg）。

Step 2: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 3: HTML

ビューワーを配置するdiv要素を用意し、class名「cloudimage-360」、画像フォルダのパス、ファイル名、画像の枚数を定義します。