Mobile Mapping Rotate

by gravitybox

HTML

<script src="https://ux.mindjet.com/private/mobilemapping/touchswipe.js"></script>
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
  <img src="http://ux.mindjet.com/private/mobilemapping/child-dog.png" id="topic2">
<img src="http://ux.mindjet.com/private/mobilemapping/parent.png" id="topic">

CSS

#topic{
width: 640px;
height: 640px;
position: absolute;
top: -470px;

        
}

#topic2 {
width: 640px;
height: 640px;
position: absolute;
top: -280px;

}

JavaScript

var pvalue = 0
 var cvalue = 0

$("#topic").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
 //  alert("yep");
      if (direction=="left"){    
      //alert(direction);
      pvalue +=90;
      $(this).rotate({ animateTo:pvalue})
  
      } else if (direction=="right"){
      //alert(direction);
      pvalue -=90;
      $(this).rotate({ animateTo:pvalue})      
      }
      
  }

    

});


$("#topic2").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
 //  alert("yep");
      if (direction=="left"){    
      //alert(direction);
      cvalue +=180;
      $(this).rotate({ animateTo:cvalue})
  
      } else if (direction=="right"){
      //alert(direction);
      cvalue -=180;
      $(this).rotate({ animateTo:cvalue})      
      }
      
  }

    

});