ヴァーチャルツアーが簡単に作れる jQuery virtual tour

Webサービス

nakayama

2008.11.19

イメージ

今回は住宅サイトなどでよく見る部屋の中を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 便利です。