jquery-flip

by amegan

amegan / jquery-flip

Flipboard like effect for jquery and jquery mobile

126 Stars 41 Forks Last release: Not found MIT License 24 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.