Need help with jquery-flip?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

amegan
126 Stars 41 Forks MIT License 24 Commits 11 Opened issues

Description

Flipboard like effect for jquery and jquery mobile

Services available

!
?

Need anything else?

Contributors list

# 387,179
CSS
HTML
19 commits
# 664,876
CSS
HTML
1 commit

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.X, 1.8.X and jQuery Mobile 1.0, 1.1 and 1.2.

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.


github page

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

Demo

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

Usage

Prerequisite

This plugin expects nested

,

,
or
elements structure. Parent element of them will be used to initialize plugin.
Flip Content 1

Flip Content 2

Flip Content 3

Flip Content 4

You can put any elements under here

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.

Flip Content 1

Flip Content 2

Flip Content 3

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

Flip Content 1

Flip Content 2

Flip Content 3

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 (e.g. 300px or 2in)
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}));
});

Flip Content 1

Flip Content 2

Flip Content 3

License

The MIT License

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.