blog

お知らせ・ブログ

Pannellumを使って複数の360度パノラマVR写真を切り替え表示（JavaScript/jQuery）

2021.01.19

まずはデモ。
360度VR写真をグリグリ動かせて、サムネイルをクリックすると画像を切り替えできます。

Pannellumとは

PannellumはJavaScript製でプラグイン不要の360度パノラマ写真ビューワです。
画像の拡大・縮小・全画面表示が可能です。
上記のデモは一番シンプルな実装方法ですが、より高度なコントロールボタンをつけたりツアー形式にすることもでき、動画にも対応しています。

GitHubはこちら
 公式サンプル・ドキュメントはこちら

ソースコード

See the Pen Pannellum – 360° Panorama View by もち (@mu_mochi921) on CodePen.

ポイント1. サムネイル部分の画像

<li>
	<a data-item-url="360vr-1.jpg">
		<img src="360vr-1-300x300.jpg" alt="">
	</a>
</li>

<li>

</a>

</li>

パノラマ画像は横長なので、サムネイルでは正方形の画像を別途用意して指定しています。
もちろんそのままのサイズを利用してもOKです。

ポイント2. サムネイルをクリックしたときの挙動

$('.panorama-navs a').on('click', function() {
  $('#panorama').html(''); // プレビュー場所のhtmlをリセット
  var url = $(this).attr('data-item-url'); //aタグに指定したプレビュー画像URLを取得
  // ビューワを再設定
  pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": url,
    "autoLoad": true // 自動読み込みさせる
  });
  return false;
});

$('.panorama-navs a').on('click', function() {

$('#panorama').html(''); // プレビュー場所のhtmlをリセット

var url = $(this).attr('data-item-url'); //aタグに指定したプレビュー画像URLを取得

// ビューワを再設定

pannellum.viewer('panorama', {

"type": "equirectangular",

"panorama": url,

"autoLoad": true // 自動読み込みさせる

});

return false;

});

サムネイルをクリックすると、パノラマを表示するHTMLを一度リセットし、取得した画像URLを使って再度パノラマビューを生成・セットします。
こうすることで複数のパノラマ画像を切り替えて表示することが可能になります。

まとめ

Pannellumは簡単に導入でき、レスポンシブに対応しているのも魅力です。
オプションも豊富なので、いろいろ触ってみると楽しいですよ。
物件等のWeb内覧や旅の記録などで活用できそうです。

一覧に戻る