Images used are copyrighted and are used for demonstration only.
Download snapfit.js and include it into your webpages HEAD section.
<script type="text/javascript" src="snapfit.js"></script>
To add snapfit just set the event onload="snapfit.add(this);" to an div surrounded image.
<div><img onLoad="snapfit.add(this);" width="400" height="200" ...></div>
Mouse- and Keyboard-driven handling:
Click & Drag
DoubleClick
DoubleClick & [alt]Key or Right Mouse Button
DoubleClick & [shift]Key or Middle Mouse Button
Keyboard-driven handling: (if focused through mouse over image)
Press [escape]
Press [delete] or [backspace]
Press [return] or [enter]
snapfit.defaultMixed = false; //BOOLEAN mix pieces at startup
snapfit.defaultSimple = false; //BOOLEAN mix the positions only
snapfit.defaultNokeys = false; //BOOLEAN no keyboard control
snapfit.defaultTofront = false; //BOOLEAN on snap automatically set all pieces behind the current to front
snapfit.defaultPolygon = false; //BOOLEAN polygons instead of rectangles
snapfit.defaultLevel = 3; //INT 0-6 (0==simple and 6==difficult)
snapfit.defaultSpace = 0; //INT 0-50 (%) inner frame space
snapfit.defaultSnap = 8; //INT 0-24 (px) snap radius
snapfit.defaultCallback = false; //JS function(){ ... } call on manual solving
snapfit.defaultMatchcolor = '#00d000'; //STR '#000000'-'#ffffff'
snapfit.defaultFalsecolor = '#ff0000'; //STR '#000000'-'#ffffff'
snapfit.defaultAreacolor = '#e0e0e0'; //STR '#000000'-'#ffffff'
snapfit.defaultBgrndcolor = '#000000'; //STR '#000000'-'#ffffff'
snapfit.defaultAreaimage = false; //BOOLEAN image as background
snapfit.defaultAreaborder = false; //BOOLEAN background border
snapfit.defaultBorderwide = 2; //INT/FLOAT 1.0-6.0 (px) pieces border width
snapfit.defaultAreaopacity = 0.33; //FLOAT 0.0-1.0 background area/image opacity
snapfit.defaultBorderopacity= 0.5; //FLOAT 0.0-1.0 pieces border/backside opacity
snapfit.defaultShadowopacity= 0.75; //FLOAT 0.0-1.0 active piece shadow opacity
snapfit.defaultForcetouchui = false; //BOOLEAN forces touch UI over the mouse UI if both available
snapfit.add(image[, options]);
image == <img> element
options e.g. {level: 2, bwide: 3, ...}
level == INT 0 - 6 Default: 3
space == INT 0 - 50 Default: 0
snap == INT 1 - 24 Default: 8
mixed == BOOLEAN true or false Default: false
simple == BOOLEAN true or false Default: false
nokeys == BOOLEAN true or false Default: false
tofront == BOOLEAN true or false Default: false
polygon == BOOLEAN true or false Default: false
mcolor == STRING '#000000' to '#ffffff' Default: '#00d000'
fcolor == STRING '#000000' to '#ffffff' Default: '#ff0000'
acolor == STRING '#000000' to '#ffffff' Default: '#e0e0e0'
bcolor == STRING '#000000' to '#ffffff' Default: '#000000'
aimage == BOOLEAN true or false Default: false
aborder == BOOLEAN true or false Default: false
aopacity == FLOAT 0.0 - 1.0 Default: 0.33
bopacity == FLOAT 0.0 - 1.0 Default: 0.50
sopacity == FLOAT 0.0 - 1.0 Default: 0.75
bwide == FLOAT 1.0 - 6.0 Default: 2.0
forcetui == BOOLEAN true or false Default: false
callback == JS false or function(){ ... }
FLOAT = snapfit.version;
STRING = snapfit.released;
snapfit.reset(image [, value]);
value == level 0-6 (0==simple, 6==difficult, default==3)
snapfit.admix(image [, value]);
value == simple true or false
(Mix positions only if true)snapfit.solve(image);
(animated)snapfit.remove(image);
<img onLoad="snapfit.add(this);" ...>
snapfit.add(document.getElementById('img'));
if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}
snapfit.add($('img'));
snapfit.add($('img'), {level:6, bwide:1});
<button type="button" onclick="snapfit.admix($('img'));"> Admix </button>
<button type="button" onclick="snapfit.solve($('img'));"> Solve </button>
alert('snapfit: '+snapfit.version+' ('+snapfit.released+')');
snapfit.reset($('img'),1);
snapfit.admix($('img'),true);
snapfit.solve($('img'));
snapfit.remove($('img'));
In older browsers, the script degrades and your visitors won't notice a thing.
Please read the license before you download snapfit.js 1.5
Please read the Frequently Asked Questions before you contact the author.
iOS (iPod/iPad/iPhone) Resource Limits (Quote):
"JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras."
Internet Explorer implementation in VML do not support all features and is unable to provide sub pixel precision. So don't expect to much. Image dimensions should always respect the original Aspect Ratio.
The speed depends on picture dimension and number of puzzle pieces. Opera 9.x and Firefox 1.5 are to slow to be practicable.
Version 1.5
Please leave any comments at this contact formular.
snapfit.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license).
This license equals neither "open source" nor "public domain".
There are also Commercial Software Licenses available.