こんにちは！
上毛印刷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で実装してみました。

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