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

No Photo

イメージ

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

参照元

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

この記事を読んだ人にオススメ