iPages Flipbook

Create Realistic Responsive HTML5 Flipbook

About

iPages Flipbook is a lightweight and rich-feature jquery plugin helps you create great interactive digital HTML5 flipbooks. With this plugin you are able to easily make media books for your site that empower publishers and bloggers to create more engaging content. It provides an easy way for you to convert static PDF documents, images set or pure HTML markup into the online magazine, interactive catalogs, media brochures or booklets in minutes. The plugin can be deployed easily and runs on all modern browsers and mobile devices.

Features

  • 3 Render Book Modes - two & one page flip, swipe
  • 3 Data Sources - images, PDF or HTML or mix each other
  • Thumbnails - the side panel with page miniatures
  • Outline - bookmarks and external links
  • Keyboard Navigation - arrows can be used for the book navigation
  • Multilevel Zoom - zoom books pages to make better look
  • Share - share a link with friends
  • Fullscreen - you can toggle from the normal state to fullscreen and back
  • PDF download - download source PDF file
  • JSON config - load parameters from an external file
  • Powerful API - over 40 options
  • Customization - create you own theme instead default
  • Help via Email

How To Use

The simple HTML file to load a PDF document

1. Load jQuery.js, pdf.min.js and jquery.ipages.min.js in the head section for your html document

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/pdf.min.js"></script>
<script type="text/javascript" src="js/jquery.ipages.min.js"></script>

2. Load the CSS theme file that styles the plugin

<script type="text/css" src="css/ipages.min.css" rel="stylesheet" media="all"></script>

3. Create a DIV with special CSS class ipgs-flipbook and set attr data-pdf-src:

<div class="ipgs-flipbook" data-pdf-src="assets/pdf/magazine.pdf"></div>

4. That's all, the plugin will show a PDF document, really just.

The advanced sample with options

The plugin has over 40 options to have greater control over the book capabilites at runtime

<html>
<head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/ipages.min.css">
<!-- /end css -->
<!-- scripts-section -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/pdf.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ipages.min.js"></script>
<script>
$(document).ready(function() {
   var options = {
      responsive:true,
      autoFit:true,

      padding:10,

      pdfUrl: 'assets/pdf/magazine.pdf',
      pdfAutoCreatePages: true,
      pdfBookSizeFromDocument: true,

      zoom:1.5,

      bookmarks: [
         {text:'Profile List', link:'', folded: false, bookmarks:[
            {text:'Avirtum', link:'http://avirtum.com', target:'blank'},
            {text:'Twitter', link:'https://twitter.com/avirtumcom', target:'blank'},
         ]},
         {text:'The first page', link:'1'},
         {text:'The last page', link:'-1'}
      ],
   };

   $('#flipbook').ipages(options);
});
</script>
<!-- /end scripts-section -->
</head>
<body>

<!-- flipbook markup -->
<div id="flipbook"></div>
<!-- /end flipbook markup -->

</body>
</html>

The sample with images and markup

<html>
<head>
<!-- css -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/ipages.min.css">
<!-- /end css -->
<!-- scripts-section -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/pdf.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.ipages.min.js"></script>
<!-- /end scripts-section -->
</head>
<body>

<!-- flipbook markup -->
<div class="ipgs-flipbook">
	<div data-image="assets/images/page-01.jpg"></div>
	<div data-image="assets/images/page-02.jpg"></div>
	<div data-image="assets/images/page-03.jpg"></div>
	<div data-image="assets/images/page-04.jpg"></div>
	<div data-image="assets/images/page-05.jpg"></div>
	<div data-image="assets/images/page-06.jpg"></div>
	<div data-image="assets/images/page-07.jpg"></div>
	<div data-image="assets/images/page-08.jpg"></div>
	<div data-image="assets/images/page-09.jpg"></div>
	<div data-image="assets/images/page-10.jpg"></div>
	<div data-image="assets/images/page-11.jpg"></div>
	<div data-image="assets/images/page-12.jpg"></div>
	<div data-image="assets/images/page-13.jpg"></div>
	<div data-image="assets/images/page-14.jpg"></div>
	<div data-image="assets/images/page-15.jpg"></div>
	<div data-image="assets/images/page-16.jpg"></div>
</div>
<!-- /end flipbook markup -->

</body>
</html>

Plugin Options

bookEngine: 'TwoPageFlip', // Sets the book render mode (TwoPageFlip, OnePageFlip, OnePageSwipe)
bookEnginePortrait: null, // Sets the book render mode for the portrait type of the book container
bookEngineLandscape: null, // Sets the book render mode for the landscape type of the book container
ratioPortraitToLandscape: 1.3, // w/h value, if more then enable landscape type, if less than enable portrait type

bookTheme: 'default', // Sets the book theme, you can create your own (see ipages.css file, the theme section)

pageWidth: 300, // Sets the book page width in px
pageHeight: 360, // Sets the book page height in px
pageStart: 1, // The number of the page to show first, after the book init

pdfUrl: null, // Sets the source of the PDF document to display
pdfAutoCreatePages: false, // If set true, the book will be automatically created from PDF document, otherwise, use markup to determine which pages to display
pdfBookSizeFromDocument: false, // If set true, the book page sizes will be automatically taken from PDF document, otherwise, the plugin will be use pageWidth and pageHeight parameters
pdfDisableRangeRequests: true, // If set true, the progressive loading of PDF document is disabled (if set false, you will get document more quickly, but it causes issues on some PDF)

preloadNeighbours: false, // If set true, the loading adjacent pages in the background is enabled
responsive: true, // Sets the book scaling depending on the size of the container
autoFit: false, // If true, the book fill all available space
autoHeight: true, // If true, the book container with automatically adjusted height

flipSound: false, // Enable/disable the page turn sound effect
flipSoundUrl: null, // Sets the source of the file with the page turn sound effect

perspective: 1500, // Used to give a 3D-positioned page some perspective
padding: { // Defines the padding space on all sides of a book container, can be number or structure
	top: 10,
	right: 10,
	bottom: 10,
	left: 10
},
flipDuration: 300, // Sets the amount of time (ms) necessary to flip a page

pageNumbers: true, // If set to true, the automatic page numbering is enabled
pageNumbersFirst: 1, // The number of the first numbered page
pageNumbersHidden: [1,-1], // Array containing numbers, the positive numbers from the beginning of the book, the negative from the end of the book ([1,-1] the firt and the last page, [1,2,-2,-1] and etc)

pageImagesUrl: null, // Sets the source of page images (template format example - 'assets/images/page-{{xx}}.jpg')
pageImagesFirst: 1, // The number of the first image
pageImagesCount: 0, // Sets the count of images to be rendered

prevnextButtons: true, // Show/hide prev & next navigation buttons
touchNavigation: true, // Sets the navigation of the book with with swipe gestures on mobile devices
keyboardNavigation: true, // Sets the navigation of the book with keyboard (arrow keys)
mouseWheelNavigation: false, // Sets the navigation of the book with mouse wheel
mouseWheelPreventDefault: true, // Enable/disable the default behaviour on the mouse wheel event

zoom: 1, // The current book zoom level
zoomMax: 7, // The maximum book zoom level
zoomMin: 1, // The minimum book zoom level
zoomStep: 0.05, // The number of the zoom step
zoomFocal: true, // Enable/disable the focal point on the book on which to zoom
dblClickZoomDefault: false, // zoom default after double click
mouseWheelZoom: true, // Sets the scaling of the book with the mouse wheel
keyboardZoom: true, // enable or disable zoom with keyboard (plus and minus keys)
pinchZoom: true, // enable or disable multitouchzoom (2 fingers touch on the screen at the same time)
pinchZoomCoef: 0.005, // the coefficient by which the book is zoomed

toolbar: true, // Show/hide the toolbar control
toolbarControls: [
	{type:'share',        active:true,  title:'share',                    icon:'ipgs-icon-share',        optional:false},
	{type:'outline',      active:true,  title:'toggle outline/bookmarks', icon:'ipgs-icon-outline',      optional:false},
	{type:'thumbnails',   active:true,  title:'toggle thumbnails',        icon:'ipgs-icon-thumbnails',   optional:false},
	{type:'gotofirst',    active:true,  title:'goto first page',          icon:'ipgs-icon-gotofirst',    optional:false},
	{type:'prev',         active:true,  title:'prev page',                icon:'ipgs-icon-prev',         optional:false},
	{type:'pagenumber',   active:true,  title:'goto page number',         icon:'ipgs-icon-pagenumber',   optional:false},
	{type:'next',         active:true,  title:'next page',                icon:'ipgs-icon-next',         optional:false},
	{type:'gotolast',     active:true,  title:'goto last page',           icon:'ipgs-icon-gotolast',     optional:false},
	{type:'zoom-in',      active:true,  title:'zoom in',                  icon:'ipgs-icon-zoom-in',      optional:false},
	{type:'zoom-out',     active:true,  title:'zoom out',                 icon:'ipgs-icon-zoom-out',     optional:false},
	{type:'zoom-default', active:true,  title:'zoom default',             icon:'ipgs-icon-zoom-default', optional:true},
	{type:'optional',     active:true,  title:'optional',                 icon:'ipgs-icon-optional',     optional:false},
	{type:'fullscreen',   active:true,  title:'toggle fullscreen',        icon:'ipgs-icon-fullscreen',   optional:true},
	{type:'sound',        active:true,  title:'turn on/off flip sound',   icon:'ipgs-icon-sound',        optional:true},
	{type:'download',     active:false, title:'download pdf',             icon:'ipgs-icon-download',     optional:true},
],

autoEnableThumbnails: false, // Show/hide the thumbnails controls after the book init
autoEnableOutline: false, // Show/hide the outline controls with bookmarks after the book init
autoEnableShare: false, // Show/hide the share dialog box after the book init

bookmarks: [], // Sets bookmarks for the book (link or page number), they shown inside the outline control
//---------------------------------------------
// Example:
//bookmarks: [
//	{text:'Profile List', link:'', folded: false, bookmarks:[
//		{text:'Avirtum', link:'http://avirtum.com', target:'blank'},
//		{text:'Twitter', link:'https://twitter.com/avirtumcom', target:'blank'},
//		{text:'YouTube', link:'https://www.youtube.com/channel/UCvENmD-ml85Lie9KFjbusnw', target:'blank'},
//		{text:'CodeCanyon', link:'https://codecanyon.net/user/avirtum/portfolio?ref=avirtum', target:'blank'}, // target: self, blank, page
//	]},
//	{text:'The page 1 from begin', link:'1'},
//	{text:'The page 2 from begin', link:'2'},
//	{text:'The page 3 from begin', link:'2'},
//	{text:'The page 1 from end', link:'-1'},
//	{text:'The page 2 from end', link:'-2'},
//	{text:'The page 3 from end', link:'-3'}
//],
//---------------------------------------------

shareControls: [ // Sets the share controls
	{type:'facebook',  active:true, title:'facebook',  icon:'ipgs-share-icon-facebook'},
	{type:'twitter',   active:true, title:'twitter',   icon:'ipgs-share-icon-twitter'},
	{type:'google',    active:true, title:'google+',   icon:'ipgs-share-icon-google'},
	{type:'linkedin',  active:true, title:'linkedin',  icon:'ipgs-share-icon-linkedin'},
	{type:'email',     active:true, title:'email',     icon:'ipgs-share-icon-email'}
],

// Config for the book engines
twoPageFlip: {},
onePageFlip: {},
onePageSwipe: {
	pageFade: true
},

onLoad: null, // function(){} fire after the plugin was loaded

// Texts used inside the plugin
txtFailedEngine: 'Can not find the book engine module specified',
txtPDFLoading: 'Loading PDF document',
txtPDFFailedToLoad: 'Failed to load PDF document',
txtShareDlgTitle: 'Share'

Plugin Events

// Plugin events are sent to notify code of interesting things that have taken place.
Event Name            Handler
ipages:ready          function(e, plugin)
ipages:showpage       function(e, plugin, page)
ipages:hidepage       function(e, plugin, page)

The sample how to use it

var options = {};

$('#flipbook').ipages(options);

// Events
$('#flipbook').on('ipages:ready', function(e, plugin) {
	console.log('event:ready');
});

$('#flipbook').on('ipages:showpage', function(e, plugin, page) {
	console.log('event:showpage [' + page + ']');
});

$('#flipbook').on('ipages:hidepage', function(e, plugin, page) {
	console.log('event:hidepage [' + page + ']');
});