JMiur [E]

Snapfit es un script que permite generar puzzles de cualquier imagen y que puede ser utilizado en la mayoría de los navegadores de última generación.

Lo podemos incluir directamente en la plantilla o en una entrada, para eso, basta descargar el ZIP que incluye un demo y alojar el archivo snapfit.js en un servidor. Luego, lo agregamos como a cualquier otro:
<script type="text/javascript" src="URL_snapfit.js"></script>
Para utilizarla, basta que agreguemos onload="snapfit.add(this);" a la etiqueta IMG que conviene que este siempre contenida en un DIV:
<div>
<img onLoad="snapfit.add(this);" width="valor" height="valor" id="nombre" src="URL_imagen" />
</div>

Así, sin parámetros, ya podemos acceder a las distintas funciones que se manejan con el teclado o el ratón:

Mover: click y arrastrar
Rotar: con doble click gira 90º en el sentido de las agujas del reloj
Flip Horizontal: doble click + ALT o botón derecho
Flip Vertical: doble click + SHIFT o botón central
Reset: tecla ESC
Mezclar: tecla SUPR o BCKSP
Resolver: tecla ENTER

Con parámetros, podemos controlar la forma en que se mostrará la imagen:

Mezclar: snapfit.admix(ID_imagen);
Resolver: snapfit.solve(ID_imagen);
Cambiar el nivel: snapfit.reset(ID_imagen, valor); donde valor puede variar entre 0 y 6

Esto, lo podemos aplicar, por ejemplo, con un enlace:
<a href="javascript:void(0);" onclick="snapfit.solve(document.getElementById('ID_imagen'));"> Resolver </a>

Todo eso también lo podemos agregar en el el evento onload de la imagen como parámetros; por ejemplo, esto haría que se mostrara mezclado en el nivel más difícil:
onload="snapfit.add(this,{level:6,mixed:true});"
Hay más parámetros que controlan otros detalles:

mixed mezclado o no, true o false (por defecto es false)
simple mezcla solo las posicioes (por defecto es false)
level valores 0 a 6 (por defecto es 3)
nokeys si es true se deshabilita el uso del teclado (por defecto es false)
polygon si es true se usan polígonos en lugar de rectángulos (por defecto es false)
aimage si es true, el fondo es la imagen original (por defecto es false)
aborder si es true se agrega un borde (por defecto es false)
aopacity es la opacidad del fondo (por defecto es 0.33)
bopacity es la opacidad del borde de las piezas (por defecto es 0.50)
sopacity es la opacidad de la pieza activa (por defecto es 0.75)
mcolor, fcolor, acolor y bcolor controlan los colores

Hay muchos otros detalles y funciones para personalizar el script; la llamada callback la utilizamos para ejecutar funciones extras, por ejemplo, mostrar una ventana de alerta cuando el puzzle ha sido resuelto:
onload="snapfit.add(this,{callback: function() {alert('Ha resuelto el puzzle.');},level:4,mixed:true,polygon:true});"

14 comentarios:

Florerias en Mexico  

Hola JMiur Antes que nada Felicitarte por tu blog y darte las gracias por compartir todos esos conocimientos que aportas para gente como yo que apenas inicia ¡Excelente Que Exista Gente Como Tu¡ El cielo del los bloggers seguramente lo tienes ganado, el otro quien sabe solo tu sabras jaja, Oye mira, esto no tiene nada que ver con la entrada pero bueno, estoy trabajando con un blog para mi negocio "floreriabiosfera" ingrese bastantes imagenes a las que para poder apliarlas se le tiene que dar clic derecho sobre ellas y luego ver imagen, Mi pregunta es ¿Habra alguna forma de crear un efecto que al pasar el cursor se amplien a su dimencion real? sin necesidad de ir imagen por imagen poniendo codigos y codigos me refiero "a un codigo unico que aplique para todas", porque te comento son como 500 y pues espero me puedas ayudar saludos desde México nota: las imagenes no exceden los 350 por 400 px

esteeee no supe donde dejar el comentario y mejor lo puse puse en dos lados sorry

Responder
Anónimo  

Sencillamente asombroso, acabo de repostear esta entrada en mi blog. Lo único malo, en mi caso, es que no anda muy bien que digamos en Internet Explorer, es muy lento y en ciertas ocasiones se queda. Pero por el resto está de chevre. Saludos!

Responder
Admin Com.Multimed.  

Genial Miur :P

Responder
La hormiguita  

Genial!!!! que bueno, especialmente , para los niños que atiendo... y para mi nieta!!!!A la que le estoy haciendo un blog para el cumple :)
gracias.

Responder
Unknown  

El pez me recuerda, la sonrisa de un presidente que hasta hace pocas horas no dejaba de mostrar los dientes, cual actor de Hollywood :X

Lo logré, luego de tanto mezclar y resolver iupi iupi

Muy bueno para incluír en páginas de niños :P

Responder
Oloman  

Llevaba un par de semanas buscando algo así para el riddle que llevo entre manos desde hace tiempo. Iba a comentar que de alguna manera estábamos conectados mentalmente, pero siendo más realista, lo increible sería no encontrar lo que se busca en tu casa. Fantástico, como siempre.

Responder
Lionel  

Hola JMiur..
No entiendo como hacer para los botones de la dificultad. Intenté esto pero no funciona...
< a
href="javascript:void(0);"
onclick="snapfit.reset(document.getElementById('
puzzle,level:1'));">Fácil

Responder
Anahí  

¡¡Uy dió, qué trabajo me dio la lechucita!! Pero está re-lindo, me lo llevo. :-)
Slds.

Responder
Anahí  

pd: y sí, el pescadito tiene la cara de muchos presidentes... jijiji

Responder
JMiur  

Floreria Biosfera:
Eso n oes nada sencillo porque dependerá mucho de lo que quieras mostarr o cóm oqueiras mostrarlo, De amnera automática y sin modificar las entradas, no hay muchos métodos disponibles. Por ejemplo, este sería uno; agregas esto junto con el resto del CSS:
.entry .product_box img:hover {
height:auto;
width:auto;
position:absolute;
}

Daniel:
Sí, en IE, parecería más lento. No sé si eso podría ser cambiado en el script, imagino que si.

Santi, La hormiguita, Graciela:
Sí, es divertido y fácil :D

Oloman
Me alegro que pueda suerte útil. Me da la impresión que no es tan difícil de entender aunque confieso que no lo he intentado.

Lionel:
Me parece que el onclick es erróneo; debería ser algo así:
onclick="snapfit.reset(document.getElementById('ID_PUZZLE'),0);"

Anahí:
Lleve, nomás :D

Responder
ArickZark  

Tiene buena pìnta el script, sigue asi amigo, me has ayudado mucho para tunear un poco mi blog.

Responder
Corso DCC  

Muy buena la idea, muy bueno el juuego, seguro que lo usarer para mi foro, y poner alguna foto de actores o un monton de cosas, fantastico y fantastica la manera como lo esplicas, el mejor la verdad, gracias por todo , por currartelo asi.

Responder
SSINGULARR  

Solo saludar y agradecer al propietario de este imprescindible blog para todos aquellos que estamos en la busqueda de mejorar nuestros espacios. Felicitaciones

JMiur  

Gracias, Anosh :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR