ぐるぐると回転できる jQuery プラグインを試してみたメモ

この記事をフルスクリーンで見るフルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。

ちょっとメモ代わり。

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

Threesixty Slider

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

0%

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


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

    <link rel="stylesheet" href="css/threesixty.css">
    <script src='js/threesixty.min.js'></script>
    
    <div class="threesixty hoge">
        <div class="spinner">
            <span>0%</span>
        </div>
        <ol class="threesixty_images"></ol>
    </div>
    
    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
        });
    
    }
    

    SpriteSpin

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

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

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

    <script src="js/spritespin.js"></script>
    
    <div id="panorama"></div>
    
    $(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
        });
      });
    

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

    スポンサーリンク

    • このエントリーをはてなブックマークに追加

    フルスクリーンモードを終了するには Esc キーを押してください。または、ココをクリックしてください。