jQuery WallFlip Plugin v0.2

Include the dependencies

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

Include the library

<link rel="stylesheet" type="text/css" href="wallflip.default.css" />
<script src="jquery.flip.min.js"></script>
<script src="jquery.wallflip.js"></script>

jQuery.WallFlip

<div id="wallflip1"></div>

<script>
    $(function () {
    	$("#wallflip1").wallflip({
    		oneAtTime: true,
    		items: [
    			{
    				image: "img/items/img1.png",
    				description: "Check this site.",
    				link: "http://site1.com",
    				link_name: "Site1"
    			},
    			{
    				image: "img/items/img2.png",
    				description: "Check this site.",
    				link: "http://site2.com",
    				link_name: "Site2"
    			},
    			{
    				image: "img/items/img3.png"
    			}
    		]
    	});
    });
</script>

Options

• oneAtTime
  • true to only allow one element to be flipped at a time
  • false to allow any number of elements to be flipped at a time
• fontSize
  • size of the font to the description and link (Ex: fontSize: "10px")
• fontFamily
  • family of the font to the description and link (Ex: fontFamily: "Arial", fontFamily: "Comic Sans, Comic Sans MS, cursive")
• items
  • image (Image url. Ex: images/myimage.jpg)
  • description
  • link (Link url. Ex: http://www.google.pt)
  • link_name (Name to be displayed by the anchor tag containing the link)

About the author

• Email: [email protected]
• Blog: http://joaoperibeiro.com
• Personal Page: http://joaopcribeiro.branded.me