snapPuzzle

A jQuery plugin for turning an image into a jigsaw puzzle game.

Download   View on GitHub

Overview and Features

Released under the MIT License. Source on Github (changelog). Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. jQuery UI drag and drop is required.

This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images. We have implemented this plugin in production on Pixacards.com and we share this piece of software - in the spirit of Pixabay - freely with others.

Usage

Include the JavaScript file jquery.snap-puzzle.min.js after loading jQuery and jQuery UI (draggable, droppable). snapPuzzle accepts settings from an object of key/value pairs, and can be assigned to any text input field.

$(selector).snapPuzzle({key1: value1, key2: value2});

Settings

PropertyDefaultDescription
pilenullSelector for puzzle pieces container.
containment'document'Confine puzzle pieces to this element/selector.
rows5Number of rows.
columns5Number of columns.
 
Callbacks
onComplete(elem)Callback that fires when the puzzle is complete.

Example

$('img.puzzle').snapPuzzle({ rows: 4, columns: 3 });

Check out the source code of this demo page to find out how to make a puzzle responsive.

Please report any bugs and issues at the GitHub repositiory.

This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.

About Us Blog More Goodies © Pixabay.com / Simon Steinberger / Hans Braxmeier