Senamion.com

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:

jquery.jScratchcard.js - js code.

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.

Senamion:

Categorie:

Archivi: