How to use Flipr

Using Flipr is incredibly simple. Just follow these two steps:

1. Make a book

Each Flipr book must have it's own HTML file, let's say book.html. Its content should be:

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"  ></script>
     <script type="text/javascript" src="http://flipr.ivank.net/flipr.js"></script>
     <script type="text/javascript">
          function Go()
          {
               var width  = 480;
               var height = 640;
               var pages  = [ "p/pic1.jpg", "p/pic2.jpg", "p/pic3.jpg", "p/pic4.jpg",
                              "p/pic5.jpg", "p/pic6.jpg", "p/pic7.jpg", "p/pic8.jpg"   ];
               var book = new Book("c", width, height, pages);
          }
     </script>
</head>
<body onload="Go();"><canvas id="c"></canvas></body>
</html>
	

Now just insert the correct size of your images into width and height and replace the image URLs with yours.

2. Insert the book into a webpage

Your book is ready! Now you just insert it into any webpage using IFRAME tag.

<iframe src="book.html" width="900" height="500"></iframe>
	

Automatic generation of books

Instead of book.html you can have book.php or book.asp. You can use server-side programming to generate books. You can make "book content" from data in your database, depending on GET / POST parameters. This way, you can integrate Flipr with your current database or with some photo sharing services.

Example in PHP

Following example should be accessed in the form book.php?dir=dir_name. Then PHP reads the content of the directory dir_name and prints the names of all files into Javascript part of the webpage.

In order to create a new book, just make a new directory (e.g. "photosXYZ") and fill it with pictures. Your book is now available at book.php?dir=photosXYZ.

<html>
<head>
     <script type="text/javascript" src="http://lib.ivank.net/ivank.js"  ></script>
     <script type="text/javascript" src="http://flipr.ivank.net/flipr.js"></script>
     <script type="text/javascript">
          function Go()
          {
               var width  = 480;
               var height = 640;
               var pages  = [  <?
                    $dir  = $_GET["dir"];
                    $imgs = scandir($dir);
                    for($i=2; $i<sizeof($imgs); $i++)
                    {
                    	echo("\"" . $dir . "/" . $imgs[$i] . "\"");
                    	if($i != sizeof($imgs)-1) echo(", ");
                    }
               ?>  ];
               var book = new Book("c", width, height, pages);
          }
     </script>
</head>
<body onload="Go();"><canvas id="c"></canvas></body>
</html>