Cómo usar Booklet de jQuery
Esta semana traigo al blog una entrada muy práctica, para aquéllos que os atrevéis con algo de programación en vuestras páginas web. Hace unos meses os explicaba que había usado Booklet para crear mi propuesta de estrategia online para pymes. Bien, en este artículo os voy a explicar cómo usar esta herramienta que utiliza la librería jQuery y que nos permite enseñar en una web información con el formato de libro.
Para que tengáis una idea de que vamos a hablar, os dejo aquí este vídeo en el que podéis ver cómo funciona. En este enlace podéis también acceder a verlo en la web.
Pues bien, es muy sencillo de hacer. Primero, tenéis que subir un archivo por cada una de las caras de la «página» y apuntaros bien su ruta, porque la tendréis que utilizar en el código.
Después, entre las etiquetas <head> y </head>de vuestro hmtl, pegáis el siguiente código:
<script src="booklet/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.latest.css" rel="stylesheet" media="screen, projection, tv" type="text/css" />
<script src="booklet/jquery.booklet.latest.js" type="text/javascript"></script>
<script type="text/javascript" src="booklet/jquery.booklet.latest.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery-1.9.1.min.js" type="text/javascript"></script>
Con ello, estáis indicando en qué carpeta están los archivos .js y .css que se necesitan para crear los libros con Booklet. En esta página, al final de todo, podréis acceder a las descargas de los archivos de Booklet.
Del archivo comprimido, subís a vuestro servidor la carpeta que se llama «booklet» y ya tendréis todos estos documentos que habéis enlazado en el código junto a las imágenes necesarias para que funcione correctamente.
Después, también dentro del head de la web, pegáis esta función:
<script>
$(function() {
$('#estrategia').booklet({
arrows:true,
pageNumbers: false,
closed: true,
autoCenter:true,
width: 1000, height: 470 });
});
</script>
Bien, análizamos el código brevemente:
- #estrategia: indica el id de la etiqueta que, en el body de la web, encierra los archivos que se mostrarán en el libro.
- arrows: true quiere decir que se muestren las flechas para pasar las páginas.
- pageNumbers: false significa que no queremos que se muestre la numeración de las páginas.
- width y height: son la anchura y la altura del libro
- closed: true es que se muestre cerrado, con la portada, al cargar la página.
- autoCenter:true tiene relación con el punto anterior y supone que el libro se mueve al centro cuando está cerrado.
Estos son sólo algunas de las muchas opciones de esta herramienta. En esta página encontraréis todos los parámetros que admite Booklet.
Y ahora, vamos al body a ver qué tenemos que poner. Nos situamos en la parte en la que queremos que aparezca el libro y escribimos lo siguiente:
<div id="estrategia"> <div><img src="img/portadaestrategiaonlinealvarezmolaresperiodismoyweb.png"/></div> <div><img src="img/webestrategiaonlinealvarezmolaresperiodismoyweb.png"/></div> </div>
Vemos que al div tenemos que darle el id de «estrategia» (que es el que usamos antes en la función, podemos darle cualquier nombre, con el requisito de que sea el mismo que empleemos en la función). Dentro de este div, creamos otro por cada página del libro. Para que no sea muy lioso, en el ejemplo sólo pongo dos páginas, que en realidad son dos archivos de imagen .png, e indico la ruta en la que están.
Bueno, si seguís los pasos al pie de la letra, tendréis un atractivo libro con Booklet en vuestra web. En la página oficial de Booklet encontraréis todo lo que necesitáis. ¡Suerte y cualquier duda ponedla en los comentarios!
Otros artículos interesantes relacionados con este tema:
septiembre 22, 2013 Booklet
septiembre 22, 2014 Diseño web: funciones en PHP
diciembre 13, 2013 En el Art Institute of Chicago
octubre 11, 2014 Diseño web: mapa interactivo con Gimp y jquery