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.
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>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). |
Creates a puzzle inside a <div> element, using an image defined by a URL.
jqJigsawPuzzle.createPuzzleFromURL = function(containerSelector, imageUrl, options)Parameters
| Parameter | Description |
|---|---|
containerSelector |
A CSS selector or a jQuery's object inside which create the puzzle. |
imageUrl |
An string with the image's URL. |
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). |
This library is free software; you can redistribute it and/or modify it under the terms of the Mozilla Public License v2.0. You should have received a copy of the MPL 2.0 along with this library, otherwise you can obtain one at http://mozilla.org/MPL/2.0/.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent