spritespin jQuery plugin

ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては360度全方向から商品のイメージをみせたい場合もあるでしょう。

このjQueryプラグイン「Spritespin」を利用すれば360度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。

サンプルはこちらになります。

→ 商品画像を360度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル

画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。


【使用方法】
まずはこちらのsprite spinのサイトからダウンロードします。ちょっとわかりにくいですが、「You can download this project in either zip or tar」とある「zip or tar」という箇所からダウンロードできます。

head部分でjavaScriptとcssを設定します。パスに注意して下さい。読み込みに時間がかかる場合があるのでローディングも設定してあります。

今回は少しずつ回転させながら撮った画像を34枚使用します。head部分でSpritespinプラグインを設定します。

以上で準備完了です。body部分に画像を表示させるための簡単なコードを記述します。

最後にサンプルのソースを記述しておきます。どうぞご参考まで。

この記事と関連してると思われる記事: