swipe and view thumbnail section

swipe and view thumbnail section

by pj_js15

HTML

<div id='swipeme' class="item">
    swipe me 1
    <div class="thumbnail-container">1111</div>
</div>

<div id='swipeme2' class="item">
    swipe me 2
    <div class="thumbnail-container">2222</div>
</div>

CSS

.item {
    width:100%;
    height:100px;
    background-color:lightblue;
    color:black;
    text-align:center;
    padding: 20px 0;
    margin: 10px 0;
    position: relative;
}

.thumbnail-container {
  background: gray;
  border: 1px solid gray;
  height: 80px;
  width: 200px;
  float: right;
  position: absolute;
  right: 0;
  display: none;
}

JavaScript

function detectswipe(el,func) {
      swipe_det = new Object();
      swipe_det.sX = 0;
      swipe_det.sY = 0;
      swipe_det.eX = 0;
      swipe_det.eY = 0;
      var min_x = 20;  //min x swipe for horizontal swipe
      var max_x = 40;  //max x difference for vertical swipe
      var min_y = 40;  //min y swipe for vertical swipe
      var max_y = 50;  //max y difference for horizontal swipe
      var direc = "";
      ele = document.getElementById(el);
      ele.addEventListener('touchstart',function(e){
        var t = e.touches[0];
        swipe_det.sX = t.screenX; 
        swipe_det.sY = t.screenY;
      },false);
      ele.addEventListener('touchmove',function(e){
        e.preventDefault();
        var t = e.touches[0];
        swipe_det.eX = t.screenX; 
        swipe_det.eY = t.screenY;    
      },false);
      ele.addEventListener('touchend',function(e){
        //horizontal detection
        if ((((swipe_det.eX - min_x > swipe_det.sX) || (swipe_det.eX + min_x < swipe_det.sX)) && ((swipe_det.eY < swipe_det.sY + max_y) && (swipe_det.sY > swipe_det.eY - max_y)))) {
          if(swipe_det.eX > swipe_det.sX) direc = "r";
          else direc = "l";
        }
        //vertical detection
        if ((((swipe_det.eY - min_y > swipe_det.sY) || (swipe_det.eY + min_y < swipe_det.sY)) && ((swipe_det.eX < swipe_det.sX + max_x) && (swipe_det.sX > swipe_det.eX - max_x)))) {
          if(swipe_det.eY > swipe_det.sY) direc = "d";
          else direc = "u";
        }
    
        if (direc != "") {
          if(typeof func == 'function') func(el,direc);
        }
        direc = "";
      },false);  
    }

    function myfunction(el,d) {
      alert("you swiped on element with id '"+el+"' to "+d+" direction");
      console.log(el);
      $('#' + el).find('.thumbnail-container').toggle();
    }



    detectswipe('swipeme',myfunction);
    detectswipe('swipeme2',myfunction);



    $(document).ready(function(){
    	$('.item').click(function(){
     ...