imgPuzzle

Create your own puzzle games from any image.


Simple example:



HTML:
JS/JQUERY:
CSS:

Example using custom options:



HTML:
JS/JQUERY:
CSS:

Advanced example:

This puzzle restarts itself on finish and becomes harder and harder indefinitely



HTML:
JS/JQUERY:
CSS:

Custom options:

Here is a list of optional settings you can set when creating a puzzle.

Option: Description: Default value:
rows Number of puzzle pieces vertically. 3
cols Number of puzzle pieces horizontally. 3
id Custom ID for the puzzle container -
startDelay Timeout before randomizing the pieces. 500 (ms)
css3animation Show css3 animation when randomizing the pieces. true
animationSpeed CSS3 animation speed. 1000 (ms)
keepImg To keep the original image and create the puzzle after it. true
imgAsBG Use the image as background behind the puzzle pieces. false
disableOnFinish Disable the puzzle once its finished. true
onStart Javascript function to run once first puzzle piece is moved. -
onFinish Javascript function to run once puzzle is finished. -


JS/JQUERY: