CVI
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+, IE 6+ and Safari, else it'll degrade and your visitors won't notice a thing.

Demonstration

girl
Level
move: Click 'n drag!
rotate: Doubleclick!
flip-y: Doubleclick 'n press [shift] or Middle Mouse Button!
flip-x: Doubleclick 'n press [alt] or Right Mouse Button!
test
OnMouseOver keyboard support:
Reset: Press [escape]!
Solve: Press [enter]!
Mixup: Press [backspace]!
Admix: Press [delete]!

Images used are copyrighted and are used for demonstration only.

Setting Up

Download snapfit.js and include it into your webpages HEAD section.

<script type="text/javascript" src="snapfit.js"></script>

Using It

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:

Move:
Click & Drag
Rotate clockwise in steps of 90°:
DoubleClick
Flip along X-axis:
DoubleClick & [alt]Key or Right Mouse Button
Flip along Y-axis:
DoubleClick & [shift]Key or Middle Mouse Button

Keyboard-driven handling: (if focused through mouse over image)

Reset:
Press [escape]
Mixup:
Press [delete] or [backspace]
Solve (animated):
Press [return] or [enter]

Usage

Set defaults
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

Add functionality to image
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(){ ... }

Get some informations
FLOAT = snapfit.version;
STRING = snapfit.released;

Change puzzle level
snapfit.reset(image [, value]);
value == level 0-6 (0==simple, 6==difficult, default==3)
(0-6 corresponds to pieces of the pixel dimension 160/128/104/80/64/56/48)

Mixup puzzle
snapfit.admix(image [, value]);
value == simple true or false (Mix positions only if true)

Solve puzzle
snapfit.solve(image); (animated)

Remove functionality from image
snapfit.remove(image);

Examples
<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'));

Why use Javascript snapfit?

In older browsers, the script degrades and your visitors won't notice a thing.

Download

Please read the license before you download snapfit.js 1.5

F.A.Q.

Please read the Frequently Asked Questions before you contact the author.

Restrictions

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.

History

Version 1.5

Version 1.4 Version 1.3 Version 1.2 Version 1.1 Version 1.01 Version 1.0

Contact

Please leave any comments at this contact formular.

License

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.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Other Projects

snapfit.netzgesta.de © 2016 by Christian Effenberger feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong