jqPuzzle: Puzzles con jQuery

jqPuzzle es un plugin para jQuery que te permitirá crear rápidamente Puzzles o rompecabezas utilizando cualquier imagen y así sorprender y entretener a tus amigos y familiares.

Utilizando jqPuzzle
Lo primero es descargar la librería jQuery y luego jqPuzzle en encontrarás los archivos jquery.jqpuzzle.js y la hoja de estilos jquery.jqpuzzle.css. Entonces el siguiente paso es incluir estos archivos en el header de nuestro HTML que deseamos.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.jqpuzzle.js"></script>
  3. <link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Luego de ello, incluimos una imagen en nuestro HTML y le asignamos el estilo jqPuzzle de la siguiente forma:

  1. <img src="photo.jpg" alt="My Desktop" class="jqPuzzle" />

Con esto ya tenemos nuestro puzzle funcionado, el cual tiene las opciones de mezclar los bloques, previsualizar la imagen original y mostrar los números con la posición de cada imagen. Una versión funcionando la pueden ver en jqPuzzle.

El puzzle generado por defecto es de 4×4, si quieres modificar estos valores o modificar otras opciones adicionales puedes visitar la documentación de este plugin en jqPuzzle: How to Use

Comentarios Total 1 comentario


Gabriel
Publicado: 09/08/2013 3:54 pm

Esta muy bueno gracias!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)