I. Usage
The files are ready to go out of the box. All you'll need to do is upload it and it will work.
Within your <head> tag, add the following code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/cardflip.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.cardflip').cardflip();
});
</script>
Within your <body> tag, add the following code:
<div class="cardflip">
<ul id="card_holder" style="display:none;">
<li><img id="card_front" src="images/img1.png" width="150" height="209"/></li>
<li><img id="card_back" src="images/img2.png" width="150" height="209"/></li>
</ul>
</div>
The class name of your div (ie. "cardflip") must be the same with the class name used when intantiating the js: $('.cardflip').cardflip();
The size of the front card MUST BE equal to the size of the back card.
II. Options
You can set the following options:
- adj : 5 - adds a little buffer space around the left and right side
- flipspeed : 250 - how fast (in milliseconds) your card turns
- autoflip : 0 - set a delay to start your autoflipping card. 0 turns it off.
- shadow : false - show a bottom shadow
- axis : y-axis - your flip axis [x-axis or y-axis]
- hover : false - enable mouse hover interaction
- url : "none" - set the url for the card (!!works on autoflip and hover only). leave set to "none" if you don't want any link.
- target : "_blank" - set the target for the link
You can add it to your code when you call the js:
$('.cardflip').cardflip({adj:10,flipspeed:500,autoflip:1000,shadow:true,url:"http://www.google.com"});
III. External Sources
jQuery http:- jquery.com/