Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Flipboard like effect for jquery and jquery mobile
branch: master

This branch is 3 commits behind amegan:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
images
MIT-LICENSE.txt
README.md
jquery.mobile.flip.css
jquery.mobile.flip.js
jquery.mobile.flip.min.css
jquery.mobile.flip.min.js

README.md

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

Something went wrong with that request. Please try again.