今回は住宅サイトなどでよく見る部屋の中を360度見渡せるヴァーチャルツアーが簡単に作成できる jQuery virtual tour の実装方法を紹介したいと思います。
実装方法
まずはサイトから jQuery virtual tour をダウンロードします。
解凍します。
導入する XHTML の<head>～<head>内に下記を記述
<link rel="stylesheet" type="text/css" href="css/jquery.panorama.css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.panorama.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.advancedpanorama").panorama({
auto_start: 0,
start_position: 1527
});
});
</script>
360度写った写真を img フォルダに入れる。
設置する<img>タグに「class="advancedpanorama"」を記述。これでOK
これだけで簡単に設置可能。jQuery virtual tour 便利です。
参照元
