Skip to Content

Javascript Flipbook

Description
This is a very simple javascript for creating a flipbook (you may also think of it as a movie) using images captured using burst-mode photography. For those who are not familiar, burst photography is used to capture continuous images of moving scenes (as in sports photography). This is useful in situations where it is difficult to click at a precise moment. Taking multiple images in burst-mode gives us a higher chance of capturing the "right" scene. I wrote this script to stitch my burst-mode photos into a flipbook.
License
This program is licensed under GPLv3.
Requirements for running the program
  • Javascript enabled browser. I have tested this on Firefox 3.0 and IE 6.0.
  • Usage
    The script assumes that the photos are named in numerical order (like 1.jpg, 2.jpg, ...). Make sure that the images are compressed to something around 100K for faster loading. A simple command on Linux for doing so is as follows (assuming you are in the directory where are pics are stored)

    bash$ convert -quality 30 *.jpg out/DSC

    Set the following variables appropriately to get the script working for yourself

    • startimg_id - number of first image
    • endimage_id - number of last image
    • flip_delay - delay between images
    • img_height - height of the image
    • total_loops - Total number of times to run the flipbook

    Please set this total_loops parameter to a low value to prevent the browser from devouring the CPU). Once you set the variables appropriately, you can copy the script within your html file and then call the flip() function as a parameter to onload as follows

    <body onload="flip()">
    </body>

    Source Code

    Check out a demo here.

    <script type="text/javascript" language="javascript">
    var images = new Array();

    var flip_delay = 250;
    var img_height = 250;
    var index = 0;
    var startimg_id = 1;
    var endimg_id = 12;
    var total_loops = 5;

    var loop_index = 0;
    var totalimgs = (endimg_id - startimg_id) + 1;

    function init() {
       var imghtml = "";
       for(i = 0; i < totalimgs; i++) {
          images[i] = startimg_id++ + ".JPG";
       }

       imghtml+=("<td><img id='flipbook' src='"+images[0]+"' height='"+img_height+"px'\/><\/td>");
       document.write("<div id='flipdiv' style='position:relative;top:0'><table><tr>"+imghtml+"<\/tr><\/table><\/div>");
    }

    function flip() {
       var img = document.getElementById("flipbook");
       img.src = images[index];
       index = (++index) % totalimgs;
       if(index == 0) loop_index++;

       if(loop_index < total_loops)
          setTimeout("flip()", flip_delay);
       setTimeout("flip()", flip_delay);
    }

    init();
    </script>

    Put code similar to the following piece of code in the HEAD section of your page to preload the images. This is required otherwise you will not get the desired flipbook effect.

    <script language="JavaScript">
          <!--
          if (document.images)
          {
            for(i = 0; i < 12; i++) {
               img = new Image();
               img.src="http://yourwebsite/"+i+"."jpg";
            }
          }
          //-->
    </script>

    Bugs/Comments
    Please report any bugs or comments to arunv@arunviswanathan.com.