ネットショップなどではいかに商品をお客様に伝えるかが大切になります。商品によっては３６０度全方向から商品のイメージをみせたい場合もあるでしょう。
このjQueryプラグイン「Spritespin」を利用すれば３６０度全方向からのビューが簡単に実現できます。FLASHを使用していないのでiPhoneなどでも表示されます。
サンプルはこちらになります。
→ 商品画像を３６０度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル
画像を準備すれば簡単に実装できます。ただ商品を回転させながら全角度からうまく撮影するにはちょっと工夫が必要になりますね。
【使用方法】
まずはこちらのsprite spinのサイトからダウンロードします。ちょっとわかりにくいですが、「You can download this project in either zip or tar」とある「zip or tar」という箇所からダウンロードできます。
head部分でjavaScriptとcssを設定します。パスに注意して下さい。読み込みに時間がかかる場合があるのでローディングも設定してあります。
|
1 2 3 4 5 6 7 8 9 10 |
<script src="javascripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="javascripts/jquery-ui-1.8.4.all.min.js" type="text/javascript"></script> <script src="javascripts/jquery.spritespin.js" type="text/javascript"></script> <link href="stylesheets/jquery-ui-1.8.4.all.css" media="screen, projection" rel="stylesheet" type="text/css" /> <style type="text/css"> .preload { background : url('stylesheets/images/ajax-loader.gif') no-repeat 50% 50%; } </style> |
今回は少しずつ回転させながら撮った画像を３４枚使用します。head部分でSpritespinプラグインを設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> $(function(){ $("#ＩＤ名").spritespin({ width : 480, // イメージの横幅 height : 327, //イメージの高さ frames : 34, //使用するイメージの枚数 image : [ "images/rad_zoom_001.jpg", "images/rad_zoom_002.jpg", "images/rad_zoom_003.jpg", "images/rad_zoom_004.jpg", <!-- 以後画像の数だけ繰り返します。 --> ], }); }); </script> |
以上で準備完了です。body部分に画像を表示させるための簡単なコードを記述します。
|
1 |
<div id="ＩＤ名"></div> |
最後にサンプルのソースを記述しておきます。どうぞご参考まで。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>商品画像を３６０度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル</title> <script src="javascripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="javascripts/jquery-ui-1.8.4.all.min.js" type="text/javascript"></script> <script src="./../src/jquery.spritespin.js" type="text/javascript"></script> <link href="stylesheets/jquery-ui-1.8.4.all.css" media="screen, projection" rel="stylesheet" type="text/css" /> <style type="text/css"> .preload { background : url('stylesheets/images/ajax-loader.gif') no-repeat 50% 50%; } </style> <script type="text/javascript"> $(function(){ $("#bike").spritespin({ width : 480, height : 327, frames : 34, image : [ "images/rad_zoom_001.jpg", "images/rad_zoom_002.jpg", "images/rad_zoom_003.jpg", "images/rad_zoom_004.jpg", "images/rad_zoom_005.jpg", "images/rad_zoom_006.jpg", "images/rad_zoom_007.jpg", "images/rad_zoom_008.jpg", "images/rad_zoom_009.jpg", "images/rad_zoom_010.jpg", "images/rad_zoom_011.jpg", "images/rad_zoom_012.jpg", "images/rad_zoom_013.jpg", "images/rad_zoom_014.jpg", "images/rad_zoom_015.jpg", "images/rad_zoom_016.jpg", "images/rad_zoom_017.jpg", "images/rad_zoom_018.jpg", "images/rad_zoom_019.jpg", "images/rad_zoom_020.jpg", "images/rad_zoom_021.jpg", "images/rad_zoom_022.jpg", "images/rad_zoom_023.jpg", "images/rad_zoom_024.jpg", "images/rad_zoom_025.jpg", "images/rad_zoom_026.jpg", "images/rad_zoom_027.jpg", "images/rad_zoom_028.jpg", "images/rad_zoom_029.jpg", "images/rad_zoom_030.jpg", "images/rad_zoom_031.jpg", "images/rad_zoom_032.jpg", "images/rad_zoom_033.jpg", "images/rad_zoom_034.jpg", ], }); }); </script> </head> <body> <h1>商品画像を３６０度回転させてみせることができるjQueryプラグイン「Spritespin」サンプル</h1> マウスで画像を回転させることができます。 <div id="bike"></div> </body> </html> |
あわせてお読みください
Roulette.js Roulette.jsは、画像をルーレット（スロット）のように回転させることができるjQueryプラグインです。 画像を数字に変更すれば…
Backstretch 以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家の…
今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。 おかげで、P…
コメントを残す