WordPressから直接動作させるサンプル。

直接wordpressから動かすサンプル。

コードは基本的に以下の3行

①<img id="20221230001">
②<script src="/wp-content/objectVR/js/ObjectVR_wp.js"></script>
③<script src="/wp-content/objectVR/objvr/20221230001/data.js"></script>

①表示するimgタグ。id設定はObjectVR.jsと同じ。
②カスタマイズ版のObjectVR.jsの読み込み。
③データを画像と一緒にフォルダを切ってデータ群と動作設定を書いたdata.jsを読み込み。

動作原理：
/wp-content以下に「objectVR」のフォルダを切ります。その下に、js用の「js」フォルダとcss用の「css」フォルダを用意。それぞれにObjectVr.jsとmodal.cssを配置。
データ保存用に、/wp-content/objectVr以下に「objvr」のフォルダを切り、データ類は作成年月日に合わせてフォルダで配置しています。データ内は「image_s」内に表示用の小さい画像、「image_l」に拡大用の大きい画像。data.jsに画像データのsrcを配列で持ち、各設定をした後に実行するscriptが書かれています（samplemakerで作成したjavascriptと同じ程度。）

簡単なエラー処理
・画像がでない
＞F12を押して、開発モードに入り、javascriptのエラーがないかチェック。jsファイルが読み込めていない場合は、script読み込みのリンク位置を確認
＞F12のエラー確認で、scriptは読めているが、画像が読めない場合は、data.jsの配列を確認。画像ファイルのリンク位置がずれている可能性が高い。

・クリックすると、拡大画面が表示されるがモーダル（重ね合わせ）表示されない。
＞cssの読み込み不良。ObjectVR.jsをカスタマイズする。「css/modal.css」を「/wp-content/objectVR/css/modal.css」等に変える。