JqueryJquery plugins   PortFolioSenamion's PortFolio HomeHome page corner A jquery blog

Senamion.com


Senamion:

Categorie:

Archivi:

jScratchcard plugin: documentation and demo page

Demo 1 - Default options

Scratch below (with left mouse button down) to see the image!

This is the javascript code to launch jScratchcard with standard options:

$("#card1").jScratchcard();
				

Demo 2 - jScratchcard with gold card and callback function

Scratch below (with left mouse button down) to see the image!

This is the javascript code to launch jScratchcard text color demo:

var	callBack = function() {
	alert('ok');
};

$("#card2").jScratchcard({
	opacity: 0.5,
	color: '#D4A017',
	stepx: 15,
	stepy: 15,
	callCallbackPerc: 50,
	callbackFunction: callBack
});
				

Demo 3 - jScratchcard with silver card, no buttom mouse necessary)

Scratch below (without mouse button down) to see the image!

This is the javascript code to launch jScratchcard background-color demo:

$("#card3").jScratchcard({
	opacity: 0.05,
	color: '#98AFC7',
	stepx: 20,
	stepy: 20,
	mousedown: false
});
				

Documentation

To use this jquery plugin:

  • download jquery.jScratchcard.js and images files
  • download last version of jquery.js
  • include the js in the head section of the page:
    <head>
    ...
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="js/jquery.jScratchcard.js" ></script>
    ...
    </head>
    
  • in the read function launch the jScratchcard (Scratchcard effect on image) relative at your element:
    <script type="text/javascript">
    	$().ready(function() {
    		$("#elementId").jScratchcard();
    	});
    </script>
    

Parameters:

  • opacity - opacity step when hover - default {'opacity': 0.2}
  • color - start background color - default {color: '#666666'}
  • stepx - x block dimension - default {stepx: 10}
  • stepy - y block dimension - default {stepy: 10}
  • mousedown - if true the left button of mouse must be down - default {mousedown: true}
  • callCallbackPerc - if valorized is the percent at which call callback - default: false
  • callbackFunction - callback function - default null
For comments see the blog page.

Download

You can download the entire archive:

  • jScratchcard.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page.
Or single file:

Release

  • 1.0 - Apr 19 2011 - New version with callback function
  • 0.1 - Apr 2 2010 - New version compatible with ie6 and ie7
  • 0.0 - Mar 30 2010 - First release of jScratchcard (Scratchcard effect on image)

License

Dual licensed under the MIT and GPL licenses.