 |
Snapfit.js 1.5 allows you to add jigsaw puzzle functionality to images on your webpages. It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing. |
Include snapfit.js 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'));
Images used are copyrighted and are used for demonstration only.
In older browsers, the script degrades and your visitors won't notice a thing.
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.
Snapfit.js and cvi_snapfit_lib.js are distributed under this LICENSE. 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.
Images used are copyrighted and are used for demonstration only.
cvi.netzgesta.de also visit CVI-lab, CVI-dev, S5 Reloaded and AJAX-FilmDB