jQuery Flip Book Video


Loading ....
 

Loops don’t always do it when you’re looking to display a stream of images on a page, spaced by time.  So if you want to make a flipbook video you’re going to have to be constructive with how you get the images onto the page, one after the other, and in the right order.

Y’see, a loop runs – full stop.  You can’t affect the speed at which a for-loop, $.each loop or any other kind of loop runs.  It just runs.

So if you have a list of 20 images in an array and you simply loop through that array the effect will happen so fast you’re likely only to register the fact that the last image has loaded.

What you ACTUALLY want to do is to:

  1.  Create a variable containing a starting-number (0 or 1)
  2. Show the 1st image based on that number
  3. Add 1 to the variable
  4. Show the 2nd image …
  5. So on and so forth.

This is fairly easy to achieve – copy the code below, change the images location to match where you’ve stored your images, and voila, away you go!

<html>
<body>
<h2>Flip Book Video Player</center></h2>
<br>
  <div id="container" class="jumbotron">
    <center><img id="picFrame" src=""></center>
  </div>

  <button id="start">Go</button>

</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

// SET UP AN ARRAY CONTAINING MY IMAGE NAMES
imageArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22];

// PICK UP THE CLICK ON THE 'GO' BUTTON AND RUN THE FUNCTION TO START THE 'LOOP'
$('#start').on('click', function() {
  myLoop(); 
}) ;	
var i = 1 ; 

// ... AND HERE'S THE FUNCTION.  SHOW A PICTURE, ADD 1 TO THE VARIABLE, SHOW THE NEXT PICTURE.
// WHEN YOU'VE COMPLETED THE LIST, RESET THE VARIABLE TO 1 AND RUN THE FUNCTION AGAIN.
// WRAP ALL OF THIS UP IN A 'setTimeout()' AND ADJUST THE DELAY TIME TO WHATEVER SUITS YOUR ANIMATION.
function myLoop() { 
  setTimeout(function() { 
     $('#picFrame').attr('src' , "IMAGES/" + i + ".jpg") ;
     i++;  
     if (i < imageArray.length) {    
       myLoop();   
     } else {
       i = 1 ;
       myLoop() ;
     }    
  }, 225);	
} ;
</script>

To help you along with that, here’s a zip file with the images I used.  Of course you can always make your own – why, you could even animate an entire feature-length cartoon using this method!

Stickman Flipbook Images

Share and enjoy, that’s what I always say!

 


RELATED PRODUCTS
  • Learn How To Increase Your Driver Distance In A Very Real And Measurable Way On The Golf Course
  • Push A Button And Out PopsYour Own Viral Video Clip.
  • VIP Video Converter is a reliable, user friendly and affordable video converting software.
  • The Complete FroKnowsPhoto 6-HourGuide to DSLR Video.
  • Course is been developed to accelerate learning by teaching to different learning styles.
  • The Ultimate Guide for Soap Making Success
  • Transform 'dud' Articles Into Traffic and Cash Machines.
  • The New Video Guides Show's How To Build A 3d Solar Panel.
  • Jump start Your Guitar Playing By 614 Faster Or Even More With The Video Surgeon
  • Clickbank Ads
     
    Share

    You may also like...

    Leave a Reply

    Your email address will not be published. Required fields are marked *