New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/jquery-flipster-css3-3d-transform-based-jquery-plugin/
jQuery Flipster - CSS3 3D transform-based jQuery plugin
Download Demo
jQuery Flipster is a CSS3 3D transform-based jQuery plugin that replicates the familiar ‘cover flow’ effect and now features a ‘carousel’ effect! It’s responsive, so it will automatically center itself and scale down to fit the area provided. It likes to be playfully touched on mobile browsers. It degrades (vaguely) gracefully, falling back to being just as flat and boring as the browsers that don’t support 3D transforms. Its only dependency is jQuery and it sets up in seconds. It’s pretty rad.
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="css/flipster.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.10.2.min.js"><\/script>')</script> <script src="/js/jquery.flipster.js"></script>
2. HTML
<div class="flipster"> <ul> <li><img src="" alt="" /></li> ... </ul> </div>
3. JAVASCRIPT
$(function() $('.flipster').flipster(); );
4. OPTIONS
itemContainer Container for the items to flipsterfy. Default is ‘ul‘
itemSelector Children of itemContainer to flipsterfy. Default is ‘li‘
style Switch between ‘coverflow’ or ‘carousel’ display styles Default is ‘coverflow‘
start Set to a number to have Flipster start centered on that item, or set to ‘center‘ to start in the middle
enableKeyboard If true, the left and right arrow keys will navigate through the list. Default is ‘true‘
enableMousewheel If true, the mousewheel will scroll through the list. Default is ‘true‘
enableTouch If true, touch swipes will scroll through the list. Default is ‘true‘
enableNav If true, Flipster will insert an unordered list of the items’ categories and titles to allow for direct navigation and give you a visual walk through of the items. Default is ‘false‘
enableNavButtons If true, Flipster will insert “Previous” and “Next” links to go left or right in the list. Default is ‘false‘
5. CALLBACKS
onItemSwitch Called whenever an item is switched
6. METHODS
Once an element is initialized with the coverflow, you can call the jump method to move it left or right:
$('#flipster').flipster(); //initialize the carousel $('#flipster').flipster('jump', 'left');
7. NAVIGATION
Flipster can build an unordered list of links to the slides, which can come in handy for some implementations. Include the id and title attribute on each item and set enableNav: true in the Javascript parameters.
An item list like:
<div class="flipster"> <ul class="flip-items"> <li id="Item-1" title="Item 1 Title"> <img src="" alt="" /> </li> <li id="Item-2" title="Item 2 Title"> <img src="" /> </li> ... </ul> </div>
will output:
<ul class="flipster-nav"> <li class="flip-nav-item no-category"><a href="#Item-1" class="flip-nav-item-link">Item 1 Title</a></li> <li class="flip-nav-item no-category"><a href="#Item-2" class="flip-nav-item-link">Item 2 Title</a></li>... </ul>
in the container.
8. CATEGORIES
The navigation list can also group items into categories. Include the data-flip-category along with the id andtitle attributes with enableNav: true in the Javascript parameters.
An item list like:
<div class="flipster"> <ul class="flip-items"> <li id="Item-1" title="Item 1 Title" data-flip-category="Category 1"> <img src="" alt="" /> </li> <li id="Item-2" title="Item 2 Title" data-flip-category="Category 1"> <img src="" /> </li> <li id="Item-3" title="Item 3 Title" data-flip-category="Category 2"> <img src="" /> </li> <li id="Item-4" title="Item 4 Title" data-flip-category="Category 2"> <img src="" /> </li> <li id="Item-5" title="Item 5 Title"> <img src="" /> </li> </ul> </div>
will output:
<ul class="flipster-nav"> <li class="flip-nav-category"> <a href="#" class="flip-nav-category-link" data-flip-category="Category 1">Category 1</a> <ul class="flip-nav-items"> <li class="flip-nav-item"><a href="#Item-1" class="flip-nav-item-link">Item 1</a></li> <li class="flip-nav-item"><a href="#Item-2" class="flip-nav-item-link">Item 2</a></li> </ul> </li> <li class="flip-nav-category"> <a href="#" class="flip-nav-category-link" data-flip-category="Category 2">Category 2</a> <ul class="flip-nav-items"> <li class="flip-nav-item"><a href="#Item-3" class="flip-nav-item-link">Item 3</a></li> <li class="flip-nav-item"><a href="#Item-4" class="flip-nav-item-link">Item 4</a></li> </ul> </li> <li class="flip-nav-item no-category"> <a href="#Item-5" class="flip-nav-item-link">Item 5 Title</a> </li> </ul>