joomla template, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, jQuery, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart, mootools, virtuemart, phpBB styles, virtuemart, drupal theme, virtuemart, phpBB styles, virtuemart

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

How to use?

Like every jquery plugin, just chain it:

 $("#flipbox").flip({
 direction:'tb'
})

How to change content?

Add content params in this way:

$("#flipbox").flip({
 direction:'tb',
 content:'this is my new content'
}) 

How to add callbacks?

There are three available callbacks: onBefore, onAnimation, onEnd

$("#flipbox").flip({
 direction:'tb',
 onBefore: function(){
 console.log('before starting the animation');
 },
 onAnimation: function(){
 console.log('in the middle of the animation');
 },
 onEnd: function(){
 console.log('when the animation has already ended');
 }
}) 

How to revert a flip?

There's an "hidden" method called revertFlip: as it says, revert a flip to the previous state

 $("#flipbox").revertFlip()

All options

Here are all options available:

• contentdefine the new content of the flipped box. It works with: html, text or a jQuery object ex:$("selector")
• directionthe direction where to flip. Possible values: 'tb', 'bt', 'lr', 'rl' (default:'tb')
• colorFlip element ending background color
• speedSpeed of the two parts of the animation
• onBeforeSynchronous function excuted before the animation starts
• onAnimationSynchronous function excuted at half animation
• onEndSynchronous function excuted after animation's end

Download: http://www.htmldrive.net/items/download/460