jqJigsawPuzzle

jqJigsawPuzzle is a JavaScript library that lets you create jigsaw puzzles in your web pages.

It requires jQuery and jQuery UI, and, by the moment, it only works in webkit browsers, since it uses the CSS property -webkit-mask-image.

Usage

In order to use jqJigsawPuzzle, first you must include the JavaScript and CSS files of jqJigsawPuzzle, jQuery and jQuery UI into your page's <head> tag:

<link type="text/css" rel="stylesheet" href="jquery-ui.custom.css"/>
<link type="text/css" rel="stylesheet" href="jqJigsawPuzzle.css"/>
    
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="jqJigsawPuzzle.js"></script>

And then you must call one of the jqJigsawPuzzle methods:

jqJigsawPuzzle.createPuzzleFromImage: transform a <img> element into a puzzle.
jqJigsawPuzzle.createPuzzleFromURL: adds a puzzle into a <div> element, using an image defined by a URL.

For example:

<div>
    <img id="my_puzzle" src="img/alaska-cliffs.jpg" alt=""/>
</div>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jqJigsawPuzzle.createPuzzleFromImage("#my_puzzle");
    });
</script>

Methods description

jqJigsawPuzzle.createPuzzleFromImage

Creates a puzzle from a <img> element.

jqJigsawPuzzle.createPuzzleFromImage = function(imageSelector, options);

Parameters

Parameter Description

imageSelector A CSS selector or a jQuery's object for select the <img> element.

options (optional) An associative array with the properties (all of them optionals): piecesSize (which defines the size of the pieces, it can take the values 'normal', 'big' or 'small'), borderWidth (an integer which defines the width of the border around the puzzle) and shuffle (an associative array with the values rightLimit, leftLimit, topLimit and bottomLimit, which allow to extends the limits in with the pieces are moved when they are shuffled, since normally they are restricted to the puzzles frame).

Parameter	Description
`imageSelector`	A CSS selector or a jQuery's object for select the `<img>` element.
`options`	(optional) An associative array with the properties (all of them optionals): `piecesSize` (which defines the size of the pieces, it can take the values 'normal', 'big' or 'small'), `borderWidth` (an integer which defines the width of the border around the puzzle) and `shuffle` (an associative array with the values `rightLimit`, `leftLimit`, `topLimit` and `bottomLimit`, which allow to extends the limits in with the pieces are moved when they are shuffled, since normally they are restricted to the puzzles frame).

jqJigsawPuzzle.createPuzzleFromURL

Creates a puzzle inside a <div> element, using an image defined by a URL.

jqJigsawPuzzle.createPuzzleFromURL = function(containerSelector, imageUrl, options)