jQuery Flip Plugin

jQuery/jQuery mobile plugin to give Flipboard app like effect. Flip effect uses css 3d transform. Flip effect currently works on WebKit browsers (e.g. Chrome, Safari, including iOS mobile safari) or Firefox 11. It still works with other browsers but the "slide" effect will be selected forecely.

Compatibility

Current version is compatible with jQuery 1.6.4, 1.7.0, 1.7.1 and jQuery Mobile 1.0 and 1.1.

Screenshots

Flip right-to-left Flip bottom-to-top

Installation

Copy jquery.mobile.flip.js, jquery.mobile.flip.css and images directory to your web page project. Note that css file and images folder must be in the same directory.

After copying files to your web project, load js and css file into your html.

<!-- "images" directory must be copied under css folder -->
<link rel="stylesheet" href="css/jquery.mobile.flip.css" />
<script type="text/javascript" src="js/jquery.mobile.flip.js"></script>

github page

http://amegan.github.com/jquery-flip/

Demo

http://amegan.github.com/jquery-flip/demo/instagram.html

Usage

Prerequisite

This plugin expects nested <div>, <p>, <section> or <article> elements structure. Root element will be used to initialize plugin.

<div id="flipRoot">
   <!-- div element -->
   <div>
     Flip Content 1
   </div>
   <!-- or p element -->
   <p>
     Flip Content 2
   </p>
   <!-- or p element -->
   <artcile>
     Flip Content 3
   </article>
   <!-- or section element -->
   <section>
     <h3>Flip Content 4</h3>
     <p>You can put any elements under here</p>
   </section>
</div>

jQuery User

jQuery user can enable plugin by calling jQuery.flip() method.

$(document).ready(function() {
  $("#flipRoot").flip();
});

option object can be passed to the flip() method. Available options are described later.

$(document).ready(function() {
  $("#flipRoot").flip({
    forwardDir: "ltor",
    height: "340px",
    showpager: true,
    loop: true}));
});

jQuery Mobile User

Plugin will be initialized with the element which has data-role="flip" attribute without calling initialization method.

<div id="flipRoot" data-role="flip">
   <div>
     Flip Content 1
   </div>
   <p>
     Flip Content 2
   </p>
   <section>
     Flip Content 3
   </section>
</div>

Option can be passed through data-flip- prefix attribute too.

<div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
   <div>
     Flip Content 1
   </div>
   <p>
     Flip Content 2
   </p>
   <section>
     Flip Content 3
   </section>
</div>

Options

Following option is supported.

option name	description	jqm attribute	value
effect	Transiton effect	data-flip-effect	'flip' or 'slide'
forwardDir	forward direction	data-flip-forward-dir	'rtol' or 'ltor' or 'ttob' or 'btot'
height	Content height	data-flip-height	height css
keyboardNav	enable keyboard navigation	data-flip-keyboard-nav	true or false
showPager	show pager	data-flip-show-pager	true or false
loop	loop contents	data-flip-loop	true or false

Sample:

$(document).ready(function() {
  $("#flipRoot").flip({
    forwardDir: 'ltor',
    height: '340px',
    showpager: true,
    loop: true}));
});

<div id="flipRoot" data-role="flip"  data-flip-show-pager="true" data-flip-forward-dir="ltor">
   <div>
     Flip Content 1
   </div>
   <p>
     Flip Content 2
   </p>
   <section>
     Flip Content 3
   </section>
</div>

License

The MIT License