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

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

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

サイトのキャプチャ

JS Cloudimage 360 View
JS Cloudimage 360 View -GitHub

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」、画像フォルダのパス、ファイル名、画像の枚数を定義します。

sponsors

top of page

©2019 coliss