ちょっとメモ代わり。

Twitter にスマホにも対応！写真を360度ぐるっと回転できる jQuery プラグインまとめ – W3Q というのが流れてきたので、ちょっと試してみた。
むか〜しは、Quick Time VR のオブジェクトやパノラマなどを使ってぐるぐる回してたりしてましたけど、今は jQuery で出来るんですね〜。

Threesixty Slider

ひとつめは、Threesixty Slider。
レスポンシブ Web デザインにも対応していますね。
ナビゲーションの表示・非表示などオプションも色々ある。
枚数が多いと読み込みに時間がかかるのは仕方ないか…

↑ まわしてみてください。

特に難しいことはなく、JavaScript ファイルと css ファイルを読み込み、下記のコードを書くだけ。（あと、必要ならばプラグインの画像ファイルもね）
画像は、『1.png、2.png、3png…』という連番ファイル。

[html]
[/html]

[html]

[/html]

[javascript]
window.onload = init;

var car;
function init(){

hoge = $(‘.hoge’).ThreeSixty({
totalFrames: 52, // Total no. of image you have for 360 slider
endFrame: 52, // end frame for the auto spin animation
currentFrame: 1, // This the start frame for auto spin
imgList: ‘.threesixty_images’, // selector for image list
progress: ‘.spinner’, // selector to show the loading progress
imagePath:’piyo/images/hoge/’, // path of the image assets
filePrefix: ”, // file prefix if any
ext: ‘.png’, // extention for the assets
height: 1000,
width: 447,
navigation: true
});

}
[/javascript]

SpriteSpin

ふたつめは、SpriteSpin。
こちらのスクリプトでもオブジェクトを回転させることはできるのですが、パノラマを試してみました。
といっても、パノラマ画像がこんなのしかなくて、210度くらいしか回転していませんがお許しを…
360度回転できるともっと楽しいかもね。

↑ まわしてみてください。

こちらも設定は簡単。
まぁ、パノラマの場合は撮影の方が大変かな？
以前に比べると、パノラマ写真も撮り易くなったとは思いますが…

[html]

[/html]

[html]

[/html]

[javascript]
$(function(){
$(“#panorama”).spritespin({
source : ‘/images/panorama.jpg’,
module : ‘panorama’, // activates panorama module
width : 700, // window width
height : 350, // window height
frames : 2091, // image width, so its 1 pixel per frame
sense : 2, // 2 rotations when dragging from side to side
animate : true,
loop : true
});
});
[/javascript]

というわけで、jQuery の備忘録でした。