https://github.com/jfmdev/jqjigsawpuzzle

A JavaScript library that lets you create jigsaw puzzles in your web pages
https://github.com/jfmdev/jqjigsawpuzzle

html5 javascript jigsaw-puzzle jquery jquery-ui puzzle-game web-game

Last synced: about 1 month ago
JSON representation

A JavaScript library that lets you create jigsaw puzzles in your web pages

• Host: GitHub
• URL: https://github.com/jfmdev/jqjigsawpuzzle
• Owner: jfmdev
• License: mpl-2.0
• Created: 2015-07-20T10:30:56.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-12-08T14:29:17.000Z (about 8 years ago)
• Last Synced: 2024-11-08T19:22:57.746Z (about 1 month ago)
• Topics: html5, javascript, jigsaw-puzzle, jquery, jquery-ui, puzzle-game, web-game
• Language: JavaScript
• Homepage:
• Size: 230 KB
• Stars: 21
• Watchers: 4
• Forks: 19
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license.txt

Awesome Lists containing this project

README

        
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 `` tag:

```javascript

    

```

And then you must call one of the _jqJigsawPuzzle_ methods:

  * _jqJigsawPuzzle.createPuzzleFromImage_: transform a `` element into a puzzle.

  * _jqJigsawPuzzle.createPuzzleFromURL_: adds a puzzle into a `
` element, using an image defined by a URL.


For example:

```html



    



    jQuery(document).ready(function() {

        jqJigsawPuzzle.createPuzzleFromImage("#my_puzzle");

    });

```

Methods description

-------------------

### jqJigsawPuzzle.createPuzzleFromImage

Creates a puzzle from a `` element.

```javascript

jqJigsawPuzzle.createPuzzleFromImage = function(imageSelector, options);

```

**Parameters**

Parameter | Description

--------- | -----------

`imageSelector` | A CSS selector or a jQuery's object for select the `` 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 `
` element, using an image defined by a URL.


```javascript

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).

License

-------

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 .