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 & DragDoubleClickDoubleClick & [alt]Key or Right Mouse ButtonDoubleClick & [shift]Key or Middle Mouse ButtonKeyboard-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 startupsnapfit.defaultSimple = false; //BOOLEAN mix the positions onlysnapfit.defaultNokeys = false; //BOOLEAN no keyboard controlsnapfit.defaultTofront = false; //BOOLEAN on snap automatically set all pieces behind the current to frontsnapfit.defaultPolygon = false; //BOOLEAN polygons instead of rectanglessnapfit.defaultLevel = 3; //INT 0-6 (0==simple and 6==difficult)snapfit.defaultSpace = 0; //INT 0-50 (%) inner frame spacesnapfit.defaultSnap = 8; //INT 0-24 (px) snap radiussnapfit.defaultCallback = false; //JS function(){ ... } call on manual solvingsnapfit.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 backgroundsnapfit.defaultAreaborder = false; //BOOLEAN background bordersnapfit.defaultBorderwide = 2; //INT/FLOAT 1.0-6.0 (px) pieces border widthsnapfit.defaultAreaopacity = 0.33; //FLOAT 0.0-1.0 background area/image opacitysnapfit.defaultBorderopacity= 0.5; //FLOAT 0.0-1.0 pieces border/backside opacitysnapfit.defaultShadowopacity= 0.75; //FLOAT 0.0-1.0 active piece shadow opacitysnapfit.defaultForcetouchui = false; //BOOLEAN forces touch UI over the mouse UI if both availablesnapfit.add(image[, options]);image == <img> elementoptions e.g. {level: 2, bwide: 3, ...}level == INT 0 - 6 Default: 3space == INT 0 - 50 Default: 0snap == INT 1 - 24 Default: 8mixed == BOOLEAN true or false Default: falsesimple == BOOLEAN true or false Default: falsenokeys == BOOLEAN true or false Default: falsetofront == BOOLEAN true or false Default: falsepolygon == BOOLEAN true or false Default: falsemcolor == 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: falseaborder == BOOLEAN true or false Default: falseaopacity == FLOAT 0.0 - 1.0 Default: 0.33bopacity == FLOAT 0.0 - 1.0 Default: 0.50sopacity == FLOAT 0.0 - 1.0 Default: 0.75bwide == FLOAT 1.0 - 6.0 Default: 2.0forcetui == BOOLEAN true or false Default: falsecallback == 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.
home 
developer 
laboratory 
mapzoom.js
shiftzoom.js
booklet.js
tripleb.js
loupe.js
busy.js
mapper.js
glossy.js
slided.js
corner.js
transm.js
gauge.js
filmed.js
edge.js
sphere.js
bevel.js
curl.js
instant.js
reflex.js
