Page Flip (Images and Media)

Page Flip is jQuery/App Framework plugin to give Flipboard app like effect. Flip effect uses css 3d transform.

This plugin is made to be very easy to use. With only a few lines of code you can have a flipping animation between your views, this looks and acts very much like the Flipboard application.

The following structure will allow to add custom content in a wrapper

<div id="flip-page">
    <div>
        <!-- custom content -->
    </div>
    <div>
        <!-- ... -->
    </div>
    <div>
        <!-- ... -->
    </div>
    <div>
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

The plugin can be called like this:

var flip = new Flip();
flip.setup({
    elements: $('#flip-page > div'),
    pageIndex: 1,
    //callback before the flip transition
    onStart: function (pageIndex) {
    },
    //callback after the flip transition
    onFinish: function (pageIndex) {
    },
    onClick: function (e) {
        console.log("x: " + e.x + " - y: " + e.y);
    }
});

Options

speed: 400, //speed for the flip transition in ms, default 400ms
nextEl: '', //if we want to specify a selector that triggers the next() function.
prevEl: '', //if we want to specify a selector that triggers the prev() function.
pageIndex: 3, //set active page, default 1

The following public methods are available to use

flip.next();
flip.prev();
flip.currentPage();

Download Page Flip (Images and Media)