20+ Best jQuery Flipbook Plugins & Tutorials with Demo
Magalone Flipbook with JavaScript & CSS
Create beautiful and interactive flipbooks, magazines or books. Magalone automatically converts your existing PDF document into an interactive and state of the art flipbook. No dependencies on other libraries like jQuery or Bootstrap, Magalone works 100% independent. Support for smartphones, tablets, touchscreens and low bandwidth situations. Features:
- page turn animations
- easy to use and customize
- no programming skills required
- lightbox mode, responsive mode, fullscreen mode
- single / double page mode ( for mobile & desktop )
- can render PDF files using the PDFs library
- supports multimedia overlays (links, videos, music, HTML, galleries) using newest HTML5 technology
- touch controls (including pinch to zoom)
dFlip — 3D & 2D Flipbook WordPress Plugin
DFlip is a high quality, realistic flipbook plugin for WordPress with smooth effects to stun your viewers. It has PDF support inbuilt and you can have easy PDF integration without any extra extension. It’s very responsive and device friendly. You will have almost all features you’ll lookout for: like hot-spots, PDF annotations, outline, custom outline, image support, etc all in a single package.
Newspaper Flipbook : jQuery Plugin
Book can read PDF files without converting to jpg files. Used is an awesome library PDF.js. PDF.js works in the following browsers: Firefox, Chrome, Opera, IE10+. Limited support for Safari, Android and IE9.
OneBook3d : jQuery Flip Book Plugin
The beautiful jQuery plugin for photographers and designers. With OneBook3D you can easily create an eye-catching presentation of your books, magazines or portfolio. Flexible, adaptive and customizable design. Auto resizing images. Full screen mode. Ideal for photo-albums!
JS Flip Book Creator
This is an online solution for Design Flip Books with custom Backgrounds, Motives and Texts.
Classy FlipBook — jQuery Plugin
- FlipBook is based on the library turn.js 3rd release. Library “turn.js 3rd release” is not included.
- reverse flip book for the eastern countries (right to left)
- any width for Flipbook, you can add to your site — working on layout responsive and not responsive.
- you can easily disable the toolbar
- unlimited number of pages
- optimal loading pages(the flipbook does not show all the page — only 7 pages is in memory)
- double pages
- you can change the width input text in bottom bar
- icon fullscreen ( only works under FF and Chrome )<
- no Flash Player needed (works on the Ipad etc.)
3D FlipBook — Responsive jQuery Plugin
Responsive design — book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout. Features:
- optimized for mobile — look and feel of a native app on mobile with touch swipe, pinch zoom etc
- easy to use and customize — create book and change book settings in the xml. Change style in the css
- no Flash Player needed — works everywhere
- choose between 2 types of flip animation — 2d or 3d flip animation customizable animation speed and transition type
- show all pages — vertical or horizontal thumbnails depending on the layout, with scrollbar, optimized for mobile devices
- advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
- real fullscreen support — if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
- 2 sets of iocns included — light and dark
jQuery Experimental page layout inspider by Flipboard
Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.
imBookFlip : jQuery Page Turning Plugin without Flash
The imBookFlip jQuery plugin can load a book in an iframe or directly on the page. The book’s pages can be set to turn when manually clicked only, begin auto flip (turn automatically) as soon as the html page loads, or begin auto flip when first page (front cover is clicked). Sound Manager can be used with the jQuery plugin to add audio to the book.
turn.js — jQuery plugin Page Flip effect for HTML5
Turn js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5. Being inspired by the effect of iBooks and Maps for iOS, I created two classes: one for manipulating the overall publication and another for each individual page. The last one is completely independent, in that it offers an API for creating its own implementations.Having some features :
- Uses Hardware acceleration
- Works on tablets and smartphones
- Easy to manipulate
- Lightweight, only 15K
jQuery flipbook layout plugin : Booklet
Booklet is a jQuery tool for displaying content on the web in a flipbook layout.It was built using the jQuery library.
3D Book Showcase with jQuery & CSS3
Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).
jQuery UI FlipBook
FlipBook will take a sequential time series of images and animate them. Each image is shown for a short period of time and then replaced by the next image in the series. The animation begins as soon as the first image is loaded; images that have not yet been downloaded from the server are skipped. They are included in the animation sequence after they have been loaded by the browser. Features:
- set the animation speed
- change animation direction
- exclude specific images
- single step through the images
- resizes to fit the images
Flippage: Turn pages of your DIVs
FlipPage is a jQuery plugin that creates the illusion of turning the pages of a book.Originally developed for a presentation on touch pad, it can also find its place in an application such as e-book. This plugin was developed to use HTML5/CSS3 graphic hardware power and thus create a smoother animation.
jQuery Fullscreen Pageflip Layout
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.
Responsive FlipBook v5 — jQuery
jQuery Responsive flipbook
- responsive design
- double pages
- no Flash Player needed (works on the Ipad etc.)
- show all pages
- excellent tools to zoom
- ajax form
Creating a Flipbook Image Slider with CSS3 3D Transforms and jQuery
Recently the ‘flip book’ effect has become really popular on a lot of websites, so I got to thinking about how you could go about pulling off that effect using some jQuery and CSS3. I find that most of the implementations of this code can get a little bit complicated, so I tried to make things as simple as possible. We’re going to write this code as a jQuery plugin, so first you need to include jQuery. Next we want to include a script called Modernizr. We only need 3D Transforms, and you can download the required script from here. This will ensure everything will work fine in browsers which do not support 3D Transforms. Then you have to make a file called jquery.pictureflip.js which will be where we’re putting our plugin code!
BookBlock: A Content Flip jQuery Plugin
BookBlock is a jQuery plugin that can be used for creating booklet-like components that allow a “page flip” navigation. Any content can be used, such as images or text. The plugin transforms the structure only when needed (i.e. when flipping a page) and uses some overlays as shadow for the pages to create more realism. We will be using jQuery++ by Bitovi which has some add-ons for jQuery (specifically, to add the swipe event).
Bookflip : JavaScript Page Turn effects
Totally javascript Book Flip for page turn effects. Bookflip engine has been totally rebuilt for better modern browser performance(IE8 & 9).Place any html code within the books pages — div id=”pages” (#no longer inside bookflip div). Each code block within the pages div will be treated as a seperate book page. Setting are adjustable in the script.
FlippingBook WordPress Gallery Plugin in jQuery
FlippingBook WordPress Gallery Plugin is a full integrated image gallery plugin for WordPress with page flipping effect. Allows you to create flash books with page flip effect directly from the administrator panel via a specifically designed interface.
Business FlipBook — jQuery WordPress Plugin
flipbook is based on the library turn.js 3rd release. Library “turn.js 3rd release” is not included.Features:
- works on the iPad,iPhone etc. ( no Flash Player needed )
- support for tags in WYSIWYG editor.
- reverse flip book for the eastern countries (right to left)
- icon fullScreen ( only works under FF and Chrome )
- you can change the zoom to double click the mouse
- you can change the zoom step for zoomIn and for zoomOut
- you can enable / disable deeplinking (string at the end of the browser’s address)
- responsive design
Real 3D FlipBook — Responsive WordPress Plugin
- The most realistic paper animation
- real 3d — lights, shadows, page bending
- easy to use and customize
- responsive design — book resizes so it fits screen width or screen height depending on the layout, thumbnails are placed horizontally or vertically depending on the layout
- optimized for mobile — look and feel of a native app on mobile with touch swipe, pinch zoom etc
- no Flash Player needed to run
- smart page loading — only current pages are loaded
- choose between 3 types of flip animation — webgl realistic 3d, jquery 2d or CSS3 3d flip animation customizable animation speed and transition type
- show all pages — thumbnails
- table of content — customizable
- advanced zooming support with mouse wheel zoom on desktop, pinch zoom on mobile, scrollbars when zoomed, touch swipe, click and drag
- zoom in and out buttons
- real fullscreen support — if fullscreen is not supported by the browser, the icon will not be shown in the menu, if fullscreen is supported it will expand the book in real full screen mode, not browser full screen
- retina friendly icons — icon font used for menu icons, fully customizable — change color, size, add drop shadow ect.
- customizable menu — use only icons that you need
- social share — facebook, twitter, google plus. linkedin
- 3 skins included, customizable skins through CSS
- 10 background patterns included
FlipHTML5 : jQuery and HTML5 flip book maker for PDF
FlipHTML5 is a free Flip Book Maker which can convert PDF to HTML5 & jQuery flipbook, also support converting MS Office, OpenOffice and Images to HTML5 and jQuery based page flip ebook. Add YouTube video, local video player, audio player, images, photo slideshow, text, links, bookmark and flash animation to enrich flip book and engage flipbook readers.Create life-like digital magazine in HTML5 & jQuery to works smoothly on mobile devices, including iPhone, iPad, Android phone, Android tablet.
WebcamSwiper : jQuery Flip Book
An experiment/hack using getUserMedia to watch for swipes left and right with a hand. This could be applied to many different uses. Flipping through pictures in an image carousel, moving to the next item in a list, flipping pages of a book or magazine, etc.
