JS Cloudimage 360 Viewで360度の画像ビューワーを作る

リポジトリ https://github.com/scaleflex/js-cloudimage-360-view セットアップ JSファイルはCDNにて配信されています。なのでHTMLにて以下のようにロードすればOKで […]

リポジトリ

https://github.com/scaleflex/js-cloudimage-360-view

セットアップ

JSファイルはCDNにて配信されています。なのでHTMLにて以下のようにロードすればOKです。

 <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>

360度画像を埋め込む

cloudimage-360というクラス名に反応して生成を行う様子です。なので以下のようなタグを作りましょう。

<div
  class="cloudimage-360"
  data-folder="https://localhost:8000/images/"
  data-filename="IMG_{index}.jpg"
  data-amount="5"
></div>

data-folerに配置するディレクトリを、data-filenameで読み込むファイル名を指定し、枚数をdata-amountで設定します。

ですので上の例ですと、以下のようなディレクトリ構成となります。

$ tree 
.
├── images
│   ├── IMG_1.jpg
│   ├── IMG_2.jpg
│   ├── IMG_3.jpg
│   ├── IMG_4.jpg
│   └── IMG_5.jpg
└── index.html

1 directory, 6 files

あまりいい画像を用意できなかったので、動作イメージはGitHubにアップされているものを置いておきます。

その他のオプション

いくつかオプションが用意されています。今回は一部を紹介します。

自動再生制御:data-autoplay

data-autoplay="true"をdivタグに付与すると、自動で回転します。

JSでの制御

window.CI360 = { notInitOnLoad: true }を設定することで、初期状態では非表示にできます。

ただし、jsファイルを読み込むより前にこの変数を定義する必要がありますので要注意です。

また、window.CI360.init()で起動、window.CI360.destroy()で非表示にできます。

  <body>
    <div style="position: fixed;top:0;left:0;width: 100%;background: #eee;z-index: 2;">
      <button onClick="window.CI360.init()">Show</button>
      <button onClick="window.CI360.destroy()">Hide</button>
    </div>
    <div
      class="cloudimage-360"
      data-folder="https://localhost:8000/images/"
      data-filename="IMG_{index}.jpg"
      data-amount="5"
    >
    </div>
    <script>window.CI360 = { notInitOnLoad: true }</script>
    <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
  </body>

スクロールイベントを拾ってinit()すれば、遅延読み込みのようなこともできそうですね。

コントローラーの設定

divタグ内にbuttonタグを配置することで、コントローラーを表示できます。

    <div
      class="cloudimage-360"
      data-folder="https://localhost:8000/images/"
      data-filename="IMG_{index}.jpg"
      data-amount="5"
    >
      <button class="cloudimage-360-prev"></button>
      <button class="cloudimage-360-next"></button>
    </div>

公式のドキュメントにCSSのサンプルも用意されています。

.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
    padding: 8px;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 4px;
}
.cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
    outline: none;
}
.cloudimage-360 .cloudimage-360-prev {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    left: 20px;
}
.cloudimage-360 .cloudimage-360-next {
    display: none;
    position: absolute;
    z-index: 100;
    top: calc(50% - 15px);
    right: 20px;
}
.cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: 50% 50% / cover no-repeat;
}
.cloudimage-360 .cloudimage-360-prev:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
}
.cloudimage-360 .cloudimage-360-next:before {
    background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
}
.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
    opacity: 0.4;
    cursor: default;
}

Cloudimageとの連携

Readmeのサンプルがモロなのですが、Cloudimageを使って利用すると便利だよというライブラリの様子です。

Responsive Integrationという項目がありますので、興味がある方はこちらも試してみてください。