1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
  2. <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
  3. <script src="js/jquery.flipCounter.1.1.pack.js" type="text/javascript"></script>
  4. 2. Next you need to put your flipCounter-medium.png image sprite into your website's images folder. By default, flipCounter expects this file at 'img/flipCounter-medium.png' relative to your html file.
  5. If you use a different folder structure, or want to build your own image sprite, that's totally fine! I'll show you how to customize it soon.
  6. 3. Now that the image is in the right location, to setup our flipCounters we simply need to place the following code somewhere on our page.
  7. <div id="counter"><input type="hidden" name="counter-value" value="100" /></div>
  8. <script type="text/javascript">
  9. /* <![CDATA[ */
  10. jQuery(document).ready(function($) {
  11. $("#counter").flipCounter();
  12. });
  13. /* ]]> */
  14. </script>
  15. 4. The hidden field inside the div allows us to pass an initial value into the counter. So if you need a way to load a variable from PHP or whatever web scripting language you use, this is how to do
  16. it. Now you should now have a crisp "100" on your page.
  17. 5. To customize the flipCounter we simply pass a list of options into our constructor. For example
  18. $("#counter").flipCounter({
  19. number:0, // the initial number the counter should display, overrides the hidden field
  20. numIntegralDigits:1, // number of places left of the decimal point to maintain
  21. numFractionalDigits:0, // number of places right of the decimal point to maintain
  22. digitClass:"counter-digit", // class of the counter digits
  23. counterFieldName:"counter-value", // name of the hidden field
  24. digitHeight:40, // the height of each digit in the flipCounter-medium.png sprite image
  25. digitWidth:30, // the width of each digit in the flipCounter-medium.png sprite image
  26. imagePath:"img/flipCounter-medium.png", // the path to the sprite image relative to your html document
  27. easing: _noEasing, // the easing function to apply to animations, you can override this with a jQuery.easing method
  28. duration:10000, // duration of animations
  29. onAnimationStarted:false, // call back for animation upon starting
  30. onAnimationStopped:false, // call back for animation upon stopping
  31. onAnimationPaused:false // call back for animation upon pausing
  32. });
  33. Actions and Animations
  34. You can call functions on flipCounter to set or retrieve the value of the counter or create animations.
  35. setNumber / renderNumber:
  36. $("#counter").flipCounter("setNumber",42); // immediately sets the number to 42.
  37. $("#counter").flipCounter("renderNumber",42); // same as above
  38. getNumber
  39. alert($("#counter").flipCounter("getNumber")); // alert whatever number is currently displayed
  40. startAnimation
  41. $("#counter").flipCounter(
  42. "startAnimation", // scroll counter from the current number to the specified number
  43. {
  44. number: 1024, // the number we want the counter to scroll to
  45. easing: jQuery.easing.easeOutCubic, // this easing function to apply to the scroll.
  46. duration: 5000, // number of ms animation should take to complete
  47. onAnimationStarted: myStartFunction, // the function to call when animation starts
  48. onAnimationStopped: myStopFunction, // the function to call when animation stops
  49. onAnimationPaused: myPauseFunction // the function to call when animation pauses
  50. }
  51. );
  52. stopAnimation
  53. $("#counter").flipCounter("stopAnimation"); // stop the animation wherever it is
  54. pauseAnimation
  55. $("#counter").flipCounter("pauseAnimation"); // pause animation, can be resumed by calling startAnimation