A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.
- wPaint - Simple paint drawing plugin.
- wColorPicker - Color pallette seleciton plugin.
Available options with notes, the values here are the defaults.
$('#elem').wScratchPad({
width : 210, // set width - best to match image width
height : 100, // set height - best to match image height
image : 'images/slide1.jpg', // set image path
image2 : null, // set overlay image path - if set color is not used
color : '#336699', // set scratch color - if image2 is not set uses color
overlay : 'none', // set the type of overlay effect 'none', 'lighter' - only used with color
size : 10, // set size of scratcher
realtimePercent : false, // Update scratch percent only on the mouseup/touchend (for better performances on mobile device)
scratchDown : null, // scratchDown callback
scratchUp : null, // scratchUp callback
scratchMove : null, // scratcMove callback
cursor : null // Set path to custom cursor
});
Include the following files:
<script type="text/javascript" src="./wScratchPad.js"></script>
<link rel="Stylesheet" type="text/css" href="./wScratchPad.css" />
$("#elem").wScratchPad({
scratchDown: function(e, percent){ console.log(percent); },
scratchMove: function(e, percent){ console.log(percent); },
scratchUp: function(e, percent){ console.log(percent); }
});
var sp = $("#wScratchPad").wScratchPad();
sp.wScratchPad('width', '200');
sp.wScratchPad('image', './images/winner.png');
sp.wScratchPad('image2', './images/scratch-to-win.png');
sp.wScratchPad('cursor', './cursors/coin.png');
sp.wScratchPad('reset');
You can init the scratch pad with a custom cursor by setting a path to an image using the cursor option.
$("#wScratchPad").wScratchPad({
cursor:'./cursors/mario.png'
});
$('#elem').wScratchPad('reset');
$('#elem').wScratchPad('clear');
$('#elem').wScratchPad('enabled', <boolean>);
- More jQuery plugins by Websanova
- Websanova JavaScript Extensions Project
- jQuery Plugin Development Boilerplate
- The Ultimate Guide to Writing jQuery Plugins
MIT licensed
Copyright (C) 2011-2012 Websanova http://www.websanova.com