Posted By

temanuel on 11/25/13


Tagged

div duration transition webkit swipe


Versions (?)

iPad Swipe


 / Published in: Other
 

  1.  
  2. Used on the Alcrea digital collateral piece: http://www.alcrea-health.com/digital/
  3.  
  4. Download: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
  5.  
  6. Original saved in /documents on iMac and Powerbook a home
  7.  
  8.  
  9. -----------------------
  10.  
  11. In Document Head:
  12.  
  13. <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
  14. <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
  15. <script type="text/javascript" src="js/default.js"></script>
  16.  
  17. -------------------------
  18.  
  19.  
  20. Modified default.js
  21.  
  22. =====================================
  23.  
  24. NOTE: Original designed to use -webkit-transform-translate3d - this is only supported by Safari. Modified to use - transform so Mozilla and P[era browsers can use. Below is updated script.
  25.  
  26.  
  27. http://www.w3schools.com/css3/css3_3dtransforms.asp
  28.  
  29. ======================================
  30.  
  31.  
  32. function cdate() {
  33. var today = new Date();
  34. year = today.getFullYear();
  35. document.write(year); }
  36.  
  37.  
  38. var IMG_WIDTH = 1024;
  39. var currentImg=0;
  40. var maxImages=11;
  41. var speed=500;
  42. var imgs;
  43. var swipeOptions=
  44. {
  45. triggerOnTouchEnd : true,
  46. swipeStatus : swipeStatus,
  47. allowPageScroll:"vertical",
  48. threshold:75
  49. }
  50.  
  51. $(function()
  52. {
  53. imgs = $(".page");
  54. imgs.swipe( swipeOptions );
  55. $('img.btnNext').click(function() { nextImage(); });
  56. $('img.btnPrev').click(function() { previousImage(); });
  57. $('#header .right img').hover(function() {
  58. $(this).attr('src', $(this).attr('src').split('.').join('_over.')); },
  59. function() { $(this).attr('src', $(this).attr('src').split('_over.').join('.'));
  60. });
  61. });
  62.  
  63. function swipeStatus(event, phase, direction, distance)
  64. {
  65. if( phase=="move" && (direction=="left" || direction=="right") )
  66. {
  67. var duration=0;
  68. if (direction == "left")
  69. scrollImages((IMG_WIDTH * currentImg) + distance, duration);
  70. else if (direction == "right")
  71. scrollImages((IMG_WIDTH * currentImg) - distance, duration);
  72. }
  73. else if ( phase == "cancel")
  74. {
  75. scrollImages(IMG_WIDTH * currentImg, speed);
  76. }
  77. else if ( phase =="end" )
  78. {
  79. if (direction == "right")
  80. previousImage()
  81. else if (direction == "left")
  82. nextImage()
  83. }
  84. }
  85.  
  86. function previousImage()
  87. {
  88. currentImg = Math.max(currentImg-1, 0);
  89. scrollImages( IMG_WIDTH * currentImg, speed);
  90. }
  91.  
  92. function nextImage()
  93. {
  94. currentImg = Math.min(currentImg+1, maxImages-1);
  95. scrollImages( IMG_WIDTH * currentImg, speed);
  96. }
  97.  
  98.  
  99. function scrollImages(distance, duration)
  100. {
  101. $('.navBoxOuter').removeClass('current');
  102. if ( currentImg == 0 ) { $('.navBoxOne').addClass('current'); $('.pageTitle h3').text('Alcrea Health'); $('.pageTitle').addClass('shadow'); }
  103. if ( currentImg == 1 ) { $('.navBoxTwo').addClass('current'); $('.pageTitle h3').text('Alcrea Health'); $('.pageTitle').removeClass('shadow'); }
  104. if ( currentImg == 2 ) { $('.navBoxThree').addClass('current'); $('.pageTitle h3').text('Alcrea Health, every step of the way'); $
  105.  
  106. ('.pageTitle').removeClass('shadow'); }
  107. if ( currentImg == 3 ) { $('.navBoxFour').addClass('current'); $('.pageTitle h3').text('Scientific Expertise'); $('.pageTitle').removeClass('shadow'); }
  108. if ( currentImg == 4 ) { $('.navBoxFive').addClass('current'); $('.pageTitle h3').text('Dosage Forms'); $('.pageTitle').removeClass('shadow'); }
  109. if ( currentImg == 5 ) { $('.navBoxFive').addClass('current'); $('.pageTitle h3').text('Dosage Forms'); $('.pageTitle').removeClass('shadow'); }
  110. if ( currentImg == 6 ) { $('.navBoxSix').addClass('current'); $('.pageTitle h3').text('Facilities & Testing'); $('.pageTitle').removeClass('shadow'); }
  111. if ( currentImg == 7 ) { $('.navBoxSix').addClass('current'); $('.pageTitle h3').text('Facilities & Testing'); $('.pageTitle').addClass('shadow'); }
  112. if ( currentImg == 8 ) { $('.navBoxSix').addClass('current'); $('.pageTitle h3').text('Facilities & Testing'); $('.pageTitle').addClass('shadow'); }
  113. if ( currentImg == 9 ) { $('.navBoxSeven').addClass('current'); $('.pageTitle h3').text('Formulation Station'); $('.pageTitle').addClass('shadow'); }
  114. if ( currentImg == 10 ) { $('.navBoxEight').addClass('current'); $('.pageTitle h3').text('Contact Alcrea Health'); $
  115.  
  116. ('.pageTitle').removeClass('shadow'); }
  117. imgs.css("transition-duration", (duration/1000).toFixed(1) + "s");
  118. imgs.css("-moz-transition-duration", (duration/1000).toFixed(1) + "s");
  119. imgs.css("-webkit-transition-duration", (duration/1000).toFixed(1) + "s");
  120. imgs.css("-o-transition-duration", (duration/1000).toFixed(1) + "s");
  121.  
  122. //inverse the number for css
  123. var value = (distance<0 ? "" : "-") + Math.abs(distance).toString();
  124.  
  125. imgs.css("transform", "translate("+value +"px,0px)");
  126. imgs.css("-ms-transform", "translate("+value +"px,0px)");
  127. imgs.css("-webkit-transform", "translate("+value +"px,0px)");
  128. imgs.css("-o-transform", "translate("+value +"px,0px)");
  129. imgs.css("-moz-transform", "translate("+value +"px,0px)");
  130. $('img.btnPrev').attr('src', 'images/btn_prev.png' );
  131. $('img.btnNext').attr('src', 'images/btn_next.png' );
  132. $('img.btnPdf').attr('src', 'images/btn_pdf.png' );
  133.  
  134. }
  135.  
  136.  
  137.  
  138.  

Report this snippet  

You need to login to post a comment.