概要
「Pannellum」を使用して360度パノラマ画像ビューアーを複数設置する実装方法を紹介。用途・要件
- ビューアーを同一ページに複数設置したい場合に利用。
- ページによって設置数が変わる場合。
- iframeではなくjavascript APIを使用。
- オプションの情報をHTMLのdata属性に設定する。DEMOでは「360度パノラマ画像」「タイトル」「プレビュー画像」のオプション情報をdata属性に設定。（同様に他のオプションも設定可能）
- Pannellum バージョン2.5.6使用。
- jQuery バージョン3.6.0使用。
検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
- 注）iOSではfullscreen APIがサポートされていないため、フルスクリーン表示できない。（Can I use）
実装
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
