Skip to content

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

License

Notifications You must be signed in to change notification settings

jfmdev/jqJigsawPuzzle

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

jqJigsawPuzzle.createPuzzleFromURL

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

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 http://mozilla.org/MPL/2.0/.