jFlip: Una vuelta de hoja

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"});