Creando un puzzle mediante jQuery

Cada día van apareciendo nuevas funcionalidades basadas en jQuery, algunas muy útiles y otras, como esta, no tanto, pero por lo curiosa que es lo muestro. Como reza en el titulo del post, con esta librería podremos hacer un puzzle con una imagen que le demos. Aquí la demo para ver de lo que hablo.

Para implementarlo primero creamos una carpeta (jQuery Puzzle por ejemplo) y descargamos las dos librerías javascrip necesarias, 1 y 2 (usar la opción picar botón derecho sobre el enlace y “guardar enlace como”). Los metemos en la carpeta. Ahora creamos un .html, lo guardamos en la misma carpeta con el nombre que queramos (en mi caso jQueryPuzzle).

Abrimos de nuevo nuestro .html y empezamos a editarlo, primero llamamos a las dos librerías y la estructura en javascript necesaria entre head y /head:

[html]



[/html]

Seguido entre body /body creamos la estructura html, hacemos un div al que le pasamos la clase puzzle para que llame a la función javascript que hemos creado antes. Dentro de este div llamamos a la imagen con la que se hará el puzzle:

[html]

[/html]

Listo. Como decía antes, el uso de esto pues es más bien poco, pero nuca se sabe…

Enlace: jQuery Demo: Creating A Sliding Image Puzzle Plug-In

Scroll al inicio