flipsnapで写真をランダム表示する

ネイティブJsでも使える

スマホでスワイプ操作が出来る便利で簡単なjQueryプラグイン「flipsnap」だけど
flipsnap.jsというのを書いた - Webtech Walker
jQuery必須ではなく、ソースはネイティブjsで書かれてたので普通のjavascriptで動いた(@version 0.6.2で動作確認)

そこから、ランダムに無限表示できるような実装を考えてた

DOM読み込み寺にflipnap適応

window.onloadではなくDOMContentLoadedを使ってます

window.addEventListener("DOMContentLoaded", function(){
  $flipsnap = Flipsnap("#demo");
}, false);

fstouchendイベントから現在地を取得

  $flipsnap.element.addEventListener('fstouchend', function(ev) {
    $newPT =ev.newPoint;
  }, false);

• ボタン移動をする場合は、newPointの取得が出来ないので直接$newPTの値を加算・減算する

一番端に来た時に新しい写真を追加

• 最大ブロック数の記録用変数($maxPT)を用意しておく
• 現実的には通信ラグがあるので端から2〜3番目に来た時に追加読み込みするのが良いと思う

    if($newPT >= $maxPT){
      $maxPT ++ ;
      pushhtml();
    }

//写真追加
function pushhtml(){
  //データ(配列)の数を計算
  $dataleng = $photodata.length-1;
  //配列の中からランダムなidを取得
  $photoid = Math.round( Math.random()*$dataleng);
  //追加するPタグノードを作成
  var pNode = document.createElement('p');
  //imageオブジェクトを作成
  var image = new Image();
  //画像URLを指定
  image.src = $photodata[$photoid];
  //ノードに画像を追加
  pNode.appendChild(image);
  //親タグにノードを追加
  document.getElementById('demo').appendChild(pNode);
  //リフレッシュで全体の幅を再取得
  $flipsnap.refresh();
}

• image.onloadで画像を読み込んでから配置する事も可能だけど、その場合はrefreshのタイミングも読み込み後に指定しないと、端まで移動ができなくなる

まあこんなもんかな