【JavaScript】360°パノラマ画像を表示する
2024年10月07日
WEBサイト制作
- #HTML
- #css
- #JavaScript
- #tips
こんにちは!
上毛印刷WEB制作担当のソーヤです。
今回は、不動産系のサイトや店舗紹介などに使えそうなJavaScriptライブラリ「Pannellum」を紹介します!
実装例
HTML例
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css">
まず上記コードを<head>内に記述してください。
次に下記コードをjsファイルの手前に記述してください。
<script src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
そうしたら、下記コードを<body>内に記述してください。
<div id="panorama"></div>
CSS例
#panorama {
width: 100%;
height: auto;
padding: 0 0 60%;
}
JavaScript例
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://jomo-p.co.jp/cp/wp/wp-content/uploads/2024/10/ai-generated-8515503_1920.jpg",
"autoLoad": true,
});
まとめ
今回もjQueryではなく、Vanilla.jsで実装してみました。
コピペしてガンガン使ってください!
この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。