PuzzleStack works by taking a photograph and slicing it up into multiple tiles. These tiles are displayed in random. The user has to click or tap the tiles to rearrange them and complete the puzzle. This type of puzzle is fun for people of all ages and abilities!

Stacks that can create puzzles are not something new. PuzzleStack is a little different, in that it provides a wide choice of customisable settings. Plus it has some advanced features, like the ability to display content or links when the puzzle is completed - perfect if you want to create a succession of puzzles for a person to work their way through. PuzzleStack is built upon the opensource jqPuzzle plugin, meaning the underlying codebase is reliable and well established.


Here is an example of PuzzleStack, setup with the default options.
My Puzzle Image.
Well done, you completed the puzzle!


Install PuzzleStack in the normal way. Open the Stacks Library to drag and drop a copy of PuzzleStack into your page.

The first thing you will want to do is set the link to a suitable image. PuzzleStack can either use an image you have previously uploaded to your hosting account. Alternatively you can use the 'Edit Link' button to set a link to an image added as a RapidWeaver Resource. Use images in JPG format, of a suitable size and shape.

Within the Stacks side panel, there are many other settings you can customise. For example, you can change the button labels and toggle the display of tile numbers. Preview your page when done, to test the puzzle.


If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.