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
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!
Reset: Press [escape]!
Solve: Press [enter]!
Mixup: Press [backspace]!
Admix: Press [delete]!
Images used are copyrighted and are used for demonstration only.