JavaScriptでパノラマ画像を横スクロールさせる

> home > making tips & help

02/07

2009

昨年8月20日のエントリーで、AJAXプログラムを使って、ウェブページ上でFlashやQuicktimeVRではなく画像変換だけのパノラマVRコンテンツを実装するお話をしました。

□ AJAXでヴァーチャルツアーを実現する : QTVR Diary
□ AJAXで高解像度全方位パノラマVRを実現する

しかしもっと単純に、横長のパノラマ画像を表示できるエリアを限定して、その画面内でマウスの左右の動きでスクロールさせるJavaScriptプログラムが公開されました。

■ Gaya Design - Panoramic Photoviewer in Javascript
http://gayadesign.nl/post/4/

デモページが同サイトに
■ Gaya Design - PhotoNav
http://www.gayadesign.com/scripts/photonav/

ソースコードは下記から
http://www.gayadesign.com/scripts/photonav/photonav.zip

この他にも、実装にはAJAXフレームワークとして有名な『prototype.js』とエフェクト系ライブラリ『scriptaculous.js』が必要です。それぞれリンク先から最新版をダウンロードして下さい。

実際にボクも埋め込んでみました。
VRPodcastのコンテンツの背景画像（760×160pxのCylindericalパノラマ画像）を表示させてみましょう。

まず<head>内に、ダウンロードしたJavaScriptファイル及びcssファイルをHTMLファイル内に読み込みます。



<script src="js/prototype-1.6.0.3.js" type="text/javascript"></script>

<script src="js/scriptaculous.js" type="text/javascript"></script>

<script src="js/photonav.js" type="text/javascript"></script>

<link href='css/photonav.css' rel='stylesheet' type='text/css' />

そして「photonav.css」に、表示されるパノラマ画像を指示する。
なお、変更箇所は「/* Adjust this part */」以下のソース

.photonav .photo {
	width: 400px;（※注：表示させるエリアの横幅）
	height:160px;（※注：表示させるエリアの高さ）
	}
.photonav .photo .opt {
	height: 160px;（※注：表示させる画像の高さ）
	background-image: url(../images/bg.jpg);（※注：表示させる画像のパス）
	}

最後にHTMLファイルの<body>内に、画像を表示させる以下のコードを埋め込みます。

<div id='photonav' class='photonav'>
	<div class='photo' style='display: none;' id='navigate'>
		<div class='fixed opt'></div>
	</div>
	<script type='text/javascript'>
		document.getElementById('navigate').style.display = 'block';
		PhotoNav.init('navigate',760,3160,true,0.1,false);
	</script>
</div>

ここで重要なのは、上段のID名の指定と、下段のJavaScriptソース。
上段の「<div class='photo' style='display: none;' id='『ID名』'>」で指定したID名を、JavaScriptソースで指定します。
下段のJavaScriptソースの数値の意味は、以下の通りです。

「PhotoNav.init('『ID名』',『画像の横幅』,『スクロール幅』,『スムーズ化』,『スムーズ数値』,『デバッグモード』);」

ID名：上段で指定したID名
画像の横幅：表示するパノラマ画像の横幅（単位：ピクセル）
スクロール幅：パノラマ画像がループされて送り出される全横幅（単位：ピクセル）
スムーズ化：「script.aculo.us」で実現するスムーズなスクロールを実現するかどうか（初期値：使う）
スムーズ数値：スムーズスクロールの数値（初期値：0.1）
デバッグモード：マウスの動きを出力する「デバッグモード」プログラムを使用するかどうか（初期値：使わない）

とまぁ、こんな感じになっているわけです。

横置きのパノラマ画像をブログに載せる場合、どうしても横幅の制約があって全部載せられなくて歯痒かったりしませんか？
そのため、このブログでもお馴染み"タテパノ"を使うことを推奨してるわけですが、被写体の多様性でいうと、圧倒的に横長の方が多いわけです。
そんなウェブページに納めるには少々難がある横長のパノラマ画像を、巧く載せる方法として、覚えておいて損は無いと思いますよ。

作者のサンプルページでは、ナビゲーションとして、この横スクロール画像を提案しています。これも非常に面白い試みですね。ボクも機会を見て実際の仕事に試してみようと思います。

＜　元ネタ　＞

□ Panoramic Photo viewer - 1147 + Ajax/Javascript/Dhtml examples and demos to download

2009年2月14日(土)16:00〜18:00 参加無料のイベントです。お気軽にお越し下さい！
親睦会（参加費6,000円）の参加申込もこちらからどうぞ

「この記事が役に立った」「この記事で助かった」「この記事は感度した」「この記事で儲かった」...
そんな人は、ぜひ、当サイトの運営資金のご寄付をお願いします。

アイコンをクリックして、iPhoneで使えるパノラマアプリを体感しよう！

PangeaVR free ★★★★★	PangeaVR Pro ¥1,200- ★★★★・	Cube World free ★★★★★	Sphere View ¥230- ★★★・・	Pano Tool ¥350- ★★・・・	PanoCalc ¥230- ★★★・・
AutoStitch ¥230- ★★★★★	TripStitch ¥600- ★★★・・	Pano ¥350- ★★★・・	Panorama ¥1,200- ★★・・・	Panoramas ¥230- ★★・・・	PANORAMA Picker ¥115- ★・・・・
PanoLabo free ★★★★★	PanoLabo Pro ¥600- ★★★★・	Mosaica Lite free ★★★・・	Mosaica free ★★★★・	Panorama Maker ¥230- ★★・・・	Panorama Camera ¥350- ★★・・・
ASKAParama free ★・・・・	MawsonsHut free ★★★・・	EON free ★★・・・	Panoramascope ¥600- ★★★・・	Topo Maps ¥800- ★★・・・	iViews ¥230- ★★★・・
Google Earth free ★★★・・	Seadragon Mobile free ★★・・・	iSynth free ★★★★・	HongKong720° ¥230- ★★・・・	vCathedrals ¥115- ★★★・・	360 Viewer free ★・・・・