Main krpano website

nefar1ous · May 11, 2012 at 7:24 AM

Hi Klaus,
I just discovered something about your website I was hoping you might share. On the banner image panorama's, when viewed with iPad, you can 2 finger swipe on the image and make the panorama begin playing in what appears to be a dropdown iframe or something. I was wondering if you might share this little trick (code) for the "2 finger swipe drop down pano player".

Thanks,
Tony

klaus.krpano · May 11, 2012 at 1:55 PM

Hi,

that's just plain simple and not very well written javascript:

touch event were added to the 'image bar' and the touch-down position remembered, and on the touch-release the release position is compared to to that remembered position, and when it was moved 100px down it scales the imagebar to fit the page and then inserts an iframe with a link to the pano...

here the touch related JS code:

Code

var imagebar_touch_x=0;
var imagebar_touch_y=0;


function imagebar_onTouchStart(event)
{
  event.preventDefault();
  imagebar_touch_x = event.changedTouches[0].pageX;
  imagebar_touch_y = event.changedTouches[0].pageY;
}


function imagebar_onTouchMove(event)
{
  event.preventDefault();
}


function imagebar_onTouchEnd(event)
{
  var xmoved = event.changedTouches[0].pageX - imagebar_touch_x;
  var ymoved = event.changedTouches[0].pageY - imagebar_touch_y;
  if (ymoved > 100)
  {
    event.preventDefault();
    showImagebarPano();
  }
  else if (xmoved < -100 || xmoved > 100)
  {
    event.preventDefault();
    nextRandomImageBar();
  }
}


var imagebar = document.getElementById("krpano_imagebar");


imagebar.addEventListener("touchstart", imagebar_onTouchStart, true);
imagebar.addEventListener("touchmove",  imagebar_onTouchMove,  true);
imagebar.addEventListener("touchend",   imagebar_onTouchEnd,   true);

Display More

best regards,
Klaus

Main krpano website

Participate now!

Users Viewing This Thread