Puzzel
![]() |
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. |
Setting Up
Include snapfit.js 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:
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]
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'));
Demonstration
![girl](images/girl.jpg)
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](images/test.png)
Reset: Press [escape]!
Solve: Press [enter]!
Mixup: Press [backspace]!
Admix: Press [delete]!
Images used are copyrighted and are used for demonstration only.