写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」

ECサイトなどで商品を360度のアングルで見せることがあるかと思います。
jQueryプラグインのRollerblade.jsを使用すると、360度ビューの実現が簡単にできます。
写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」サンプル

使用方法
Rollerblade.jsからファイル一式をダウンロード。
また、見せたい角度すべての画像を用意します。
※これが一番面倒だったりしますね・・・
次に最初に見せたい画像をclass名でくくって記述します。
<div class="class名">
<img src="一枚目の画像">
</div>

最後にjsを記述していきます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="rollerblade.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var motions = [
//表示させたい画像パスを記述
'画像パス1',
'画像パス2',
'画像パス3',
'画像パス4',
'画像パス5'
];

$(".class名").rollerblade({
imageArray: motions,
sensitivity: 20,//数字を小さくするとマウス移動に対して回転の動きが早くなります
drag: false//ドラッグさせるかどうか
})
});
</script>

写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」サンプル

sponsors

「写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」」をシェアする

記事作成:
記事URL:

TOP > > > 写真の360度ビューを実現するjQueryプラグイン「rollerblade.js」