Wednesday, October 31st, 2007
jQuery Demo: Creating A Sliding Image Puzzle Plug-In
Ben Nadel has created a new jQuery plugin that allows you to have fun with sliding image puzzles by simple calling:
JAVASCRIPT:
-
-
$( "div.puzzle, p" ).puzzle( 100 );
-
Ben walks you through how it all works and you can check out the action yourself.
3.4 rating from 35 votes
Dion, That pic creeped me out man :S
Hi,
I just wanted to add that I released another jQuery-based sliding puzzle some weeks ago:
jqPuzzle - Customizable Sliding Puzzles
jqPuzzle uses the same approach of simply applying a plugin method to an image selector, but adds a bunch of optional parameters (number of cols/rows, initial appearance, animation times). Simple puzzles can also be set up via a CSS-based micro format.
However, it’s great to see other people playing around with jQuery (+ puzzles). My intention, as Ben’s, was simply to dig deeper into jQuery and the plugin authoring process. Even though a sliding puzzle is not a typical business application, it seemed perfect to showcase the power of this wonderful library.