Jquery flip - Flipboard like effect

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.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE STYLES AND SCRIPTS

<link rel="stylesheet" href="css/jquery.mobile.flip.css" />
<script type="text/javascript" src="js/jquery.mobile.flip.js"></script>

2. HTML

<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>

3. JAVASCRIPT

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

4. OPTIONS

5. 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>