Crear un libro de una galería de imágenes en JQUERY con jFlip

by Bitácora Web

10/08/2015

in Blog

1 comentario

192

Hoy os quiero dejar un ejemplo de cómo crear un efecto de pasar páginas a forma de libro con JQUERY y el plugin jFlip.

Con jFlip podemos hacer de una manera sencilla este efecto con una galería de imágenes.

Lo primero de todo deberemos bajarnos el plugin jFlip:

http://www.jquery.info/The-jFlip-plugin

Para que sea compatible en Internet Explorer será necesario también el plugin jquery excanvasx como indica en el enlace de jFlip.

En el script habrá que incluir las tres librerias: JQUERY, EXCANVASX y JFLIP:

<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE]><script type="text/javascript" src="js/excanvasX.js"></script><![endif]-->

<script type="text/javascript" src="js/jquery.jflip-0.4.js"></script>

Una vez incluidas las librerías Javascript pasado a crear la galería de imágenes con la etiqueta <UL> (Unsorted List) de HTML:

<ul id="galeria1">
	<li><img src="images/jflip1-300x225.jpg" alt="Imagen jFlip 1" /></li>
	<li><img src="images/jflip2-300x161.jpg" alt="Imagen jFlip 2" /></li>
	<li><img src="images/jflip3-300x225.jpg" alt="Imagen jFlip 3" /></li>
	<li><img src="images/jflip4-300x225.jpg" alt="Imagen jFlip 4" /></li>
	<li><img src="images/jflip5-300x198.jpg" alt="Imagen jFlip 5" /></li>
	<li><img src="images/jflip6-300x200.jpg" alt="Imagen jFlip 6" /></li>
	<li><img src="images/jflip7-300x201.jpg" alt="Imagen jFlip 7" /></li>
</ul>

</ul>

Y finalmente lanzamos jFlip sobre nuestra galería, en este caso hemos establecido un tamaño de 300×300, un fondo de color gris y que se muestre el pliegue de la página desde abajo:

<script type="text/javascript">
$("#galeria1").jFlip(300,300,{background:"grey",cornersTop:false}).
bind("flip.jflip",function(event,index,total){
  $("#l1").html("Image "+(index+1)+" of "+total);
});
</script>