2015年6月9日火曜日

Cardboard実験サイト2.3 / HTML (div構成 / Photo1 - ステレオ写真)

概要
あらかじめ作ったステレオ写真を表示します。
これはステレオ写真をハコスコで見られるようにしようと作ったもので、画面分割は行っていません。

画面レイアウト設定
index.htmlで画面レイアウトのためのタグ構造を作り、画面サイズに応じてcardboard.jsでレイアウト設定を行います

タグ構造 
bodyタグ内は次のようにdivを数階層積み重ねたものです。
javascript、cssはdivのidを使用するので、idはこのとおりにしておきます。

  <body onload="init();" ontouchmove="blockMove(event)" >
    <div id="container">
      <div id="outerBox" class="photo" onclick="changeImage()">
      </div>
    </div>
  </body>

javascript
index.html

 
      function init() {
          //divの配置
          Config.setContainerSize();
          //最初の画像表示
          changeImage();
      }

      //画像名配列
      var arr = new Array("image1.jpg", ""image2.png", ...);
      var ix = -1;

      //clickまたはtouchstartイベントで呼ばれ、画像を切り替える。
      function changeImage() {
          //右画面で次へ進み、左が画面で前に戻る。
          if (event.pageX == null) 
              ix = 0;
          else
              ix += (event.pageX > (Config.winW / 2) ? 1 : -1);
          if (ix >= arr.length)
              ix = 0;
          else if (ix < 0)
              ix = arr.length - 1;
          //divのbackgroundImageにセット。
          with(document.getElementById("outerBox").style) {
              backgroundImage = "url(Images/" + arr[ix] + ")";
              backgroundSize = "100%";
          }
      }

      //スワイプされても画面を動かさないようにする。
      function blockMove(event) {
        if (Config.isIOS) event.preventDefault();
      }

Config.setContainerSize();
  デバイス横位置の大きさに合わせて画面をリサイズ、イベント設定を行なう。
  また、デフォルトで次のclickまたはtouchstartイベントハンドラをセットする。
  左画面ダブルクリック　上の階層に戻る
  右画面ダブルクリック　location.reload();
  シングルクリック　　　Config.onclickにfunctionが設定されていればそれを実行、
                                   さもなければなにもしない。

 イベントハンドラが不要な場合はsetContainerSizeを呼ぶ前に次の行を追加。
 Config.addClickEvent = false;

 Photo1ではdivにonclickイベントハンドラを設定することで上記設定を置き換えている。
 <div id="outerBox" class="photo" onclick="changeImage()">
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)