Submit your widget

Likes books content flip plugin with jQuery

Created 11 years ago   Views 19373   downloads 4117    Author tympanus
Likes books content flip plugin with jQuery
View DemoDownload
36
Share |

booklet-like component that let's you navigate through its items by flipping the pages with jQuery

BookBlock is a 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).

The following structure will allow to add custom content in a wrapper with the class “bb-item”, which represents an open page (left and right side):

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- custom content -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

The plugin can be called like this:

$(function() {
             
    $( '#bb-bookblock' ).bookblock();
 
});

Read more:http://tympanus.net/codrops/2013/05/28/bookblock-revised/