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/