W3PlantingFree Web Resources for your website

Sliding Image Puzzle is jQuery plug-in which creates sliding-image puzzles. You have to place your images in a DIV container. Hooking your container with jQuery is as simple as, just drop your script and call the method on your jQuery stack object and your Sliding Image Puzzle is ready to go.

$( “div.puzzle, p” ).puzzle( 100 );

The plug-in is targeted to work with XHTML specification.

The puzzle pieces are DIV tags that using the nested image as their background image. The background images are positioned relative to the puzzle piece’s initial layout prior to shuffling. Because all of the pieces are uniform, the plug-in will crop the main image slightly to ensure that the board maintains a specific aspect ratio. Therefore, it may be shorter and/or narrower than the original image.

The sliding Image Puzzle plug-in is compatible with all major browsers and free to use in your websites.

You can be having fun with plying/solving the image puzzle demo here.

More information about the plug-in can be found here.

Share this post