上毛印刷株式会社

【JavaScript】360°パノラマ画像を表示する

【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で実装してみました。

コピペしてガンガン使ってください!

WEB制作担当ソーヤ

ソーヤ

上毛印刷WEB制作担当
前職は東証プライム企業の本社WEB受託チームにてフロントエンドエンジニアを3年経験。


この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。

    お名前必須
    メールアドレス必須
    お問い合わせ内容必須
    PAGE TOP