JMiur [E]

jFlip es un plugin de jQuery que genera una galería de imágenes con un singular efecto donde los cambios se ven como si se diera vuelta una página de un libro.

De todos los que he visto similares, es uno de los más simples ya que sólo requiere agregar el script y ejecutar la función, aplicándola sobre listas simples, pudiéndose agregar varias en una misma página.

Lamentablemente, como este tipo de efecto se realiza con etiquetas canvas, en Ias versiones viejas de Internet Explorer hay problemas y proponen usar algún script adicional como ExplorerCanvas peo, no veo que funcione bien así que acá, lo pasaré por alto.

El plugin lo descargamos desde la página del autor, ya sea en su versión full como minimizada y lo agregamos comos siempre, antes de </head>

Luego, el HTML no tiene misterio alguno, colocamos una lista con un ID y las imágenes a mostrar:
<ul id="jflipDEMO">
  <li><img src="URL_IMAGEN_1" /></li>
  <li><img src="URL_IMAGEN_2" /></li>
  <li><img src="URL_IMAGEN_3" /></li>
  <!-- seguimos poniendo cuantas imágenes se nos ocurra -->
</ul>
Y lo ejecutamos de este modo:
<script>
  $("#jflipDEMO").jFlip(300,300,{background:"#903941",cornersTop:true,scale:"fit"});
</script>
Allí es donde podemos establecer algunas opciones; en este caso:

300,300 son el ancho y alto del contenedor (por defecto 300x300)
background es el color de fondo si la imagen es más chica (por defecto es verde)
cornersTop indica si los enlaces para "dar vuelta las hojas" se verán arriba (true) o abajo (false)
scale tiene tres valores posibles:
noresize no hará nada, las imágenes se mostrarán tal cual son
fit ajusta su tamaño para que "entren" en el contenedor
fill re-dimensiona las imágenes para mantener la proporción del aspecto del contenedor

Otro ejemplo:
$("#jflipDEMO").jFlip(350,350,{background:"#903941",cornersTop:false,scale:"fill"});

19 comentarios:

Johnny  

Buenisimo plugin, JMiur. Se puede utilizar a modo de slider o para mostrar enlaces, por ejemplo.

Responder
Beben Koben  

like flash...xixixixi ;)

Responder
Graciela  

Muy delicado, precioso :D

Responder
Adrián J. Messina  

Vistoso el efecto :D

Responder
Lautaro Rodríguez Xavier  

No sabés como estuve buscando una cosa así y no pensé que sería tan fácil. Si estuviera en Taringa te daría +10. GRACIAS.

Responder
Rosendo Ramírez Aquino  

Hablando de fotos y plugins hay alguno para blogger de este tipo http://www.elreyjesus.org/llevando-el-poder-sobrenatural-de-dios-a-las-bahamas-sesion-2/

que cargue albumes de flickr?... y si existiera cual es? :S, me gustaria tener entradas con albumes de este tipo :)

Responder
CocinaCoco  

Lo habia visto en una página de una revista,y simpre quise saber como se hacía!muchas gracias por compartirlo!!voy a probarlo!

Responder
JMiur  

Se puede usar para cualquier cosa, Johnny. Si es posible agregar enlaces, no lo sé.

Rosendo Ramírez Aquino
Blogger no tiene restricciones en cuanto que puede usarse o no así que deberías buscar en la web algún plugin que permita eso. o recuerdo ninguno en especial pero, existen.

Responder
Rosendo Ramírez Aquino  

JMiur te agradezco :)

Responder
R&S  

Me encanta. Cada día me gusta más tu blog.
http://unmundocultura.blogspot.com/

Responder
Amiitha  

Queda hermoso :D ya estoy pensando en dónde colocarlo~!
Como siempre se agradece la educación que nos das a los que recién empezamos ;)

Responder
FRAN LLANO  

No se porqué, JMIUR, pero no soy capaz de lograr el efecto. Las imágenes se visualizan como una lista sin lograr el efecto libro. Te agradecería que me echaras una mano. Mi página es http://hermandaddelcostalero.blogspot.com.es/

JMiur  

Tendria que ver el ejemplo concreto; puede ser que el script no se cargue o falte el CSS.

FRAN LLANO  

No se como ni porqué pero ya me funciona, muchas gracias.

Responder
Henry De la Mano  

Lo trate de usar en mi servidor y me aparece el siguiente error:

Error: TypeError: $(...).jFlip is not a function
Source File: http://localhost/jflip/ejm.html

JMiur  

localhost es un servidor que está en tu PC por lo tanto, no hay forma que nadie lo pueda ver excepto tu mismo.

Henry De la Mano  

Precisamente, ni yo mismo podía verlo, lo subí a un servidor público y al ver el código fuente del HTML y hacer clic para ir al hipervínculo del jquery.jflip...js, y no se encontraba, le cambie el nombre y seguía el mismo problema, lo volví a cambiar al nombre original y cuando probé nuevamente funcionó.

Responder
david villamar  

Hola que tal es muy bueno este efecto junto lo que busco, pero sabes si hay manera que en vez de imagenes se pueda poner un contenido html dentro de un div

JMiur  

No tengo idea; tendrás que preguntar en la página del desarrollador.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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