El primer parámetro que le pasamos al método load() es la librería que queremos cargar. El segundo parámetro es la versión de la librería, en este caso la versión 0 (cero). El tercer parámetro es el idioma en el que queremos que se nos muestre el interfaz; este último parámetro es opcional y si no lo pasamos se usará el idioma por defecto que es el ingles.
Segundo paso, crear el objeto visor
var visor = new google.books.DefaultViewer(document.getElementById('DOMVisor'));
Al constructor DefaultViewer se le pasa como parámetro el nodo DOM donde se representará el libro.
Tercer paso, inicializar el visor con un libro concreto
El método load() es el que se encarga de inicializar el objeto visor. Como primer parámetro le pasamos el identificador del libro que puede ser el ISBN, el número OCLC, el LCCN, el Volume ID en Book Search o la URL de previsualización de Book Search. En el ejemplo se puede ver el uso del caso más común, el ISBN.
visor.load('ISBN:0738531367');
Además el método load() admite dos parámetros opcionales, se trata de dos funciones de callback. La primera una función que será llamada en caso de que el libro no se haya podido cargar y la segunda una función que será llamada cuando el libro se ha cargado sin problemas. Veamos un ejemplo:
function LibroNoCargado() {
alert("El libro no ha podido ser cargado");
}
function LibroCargado() {
alert("El libro se ha cargado correctamente");
}
visor.load('ISBN:0738531367', LibroNoCargado, LibroCargado);
Ultimo paso, navegar por el libro
Una vez tenemos cargado el libro en el visor el último paso es navegar por el libro. Para ello podemos usar los métodos del objeto visor (nextPage(), previousPage(), zoomIn(), zoomOut(), etc) que encontraréis documentados en la guía de referencia del API. En nuestro ejemplo lo que vamos a hacer es pasar página en el libro una vez cada tres segundos. Lo haríamos con el siguiente código:
function PasarPagina(visor) {
window.setTimeout(function() {
visor.nextPage();
PasarPagina(visor);
}, 3000);
}
Todo junto
Si juntamos todos los pasos en un fichero html simple nos quedaría un código tal que así:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<
html xmlns=
"http://www.w3.org/1999/xhtml">
<
head>
<
title>Ejemplo de uso del Embedded Viewer API de Google Book Search</
title>
<
script type=
"text/javascript" src=
"http://www.google.com/jsapi"></
script>
<
script type=
"text/javascript">
//Cargamos el API de Books en castellanogoogle.load(
"books",
"0", {
"language":
"es"});
var visor =
null;
//Esta es la funcion que se encarga de pasar pagina cada tres segundos function PasarPagina(visor) {
window.setTimeout(
function() {
visor.nextPage();
PasarPagina(visor);
},
3000);
}
//Esta funcion sera llamada si no se puede cargar el libro function LibroNoCargado() {
alert(
"El libro no ha podido ser cargado");
}
//Si el libro se ha podido cargar empezamos a pasar paginas function LibroCargado() {
PasarPagina(visor);
}
function Inicializar() {
//creamos el objeto visorvisor =
new google.books.
DefaultViewer(document.getElementById(
'DOMVisor'));
//cargamos el librovisor.load(
'ISBN:0738531367', LibroNoCargado, LibroCargado);
}
//Nos aseguramos de que la funcion es llamada cuando se cargue la paginagoogle.setOnLoadCallback(Inicializar);
</
script>
</
head>
<body>
<div id="DOMVisor" style="width: 425px; height: 675px"></div>
</body>
</html>
y nos produciría este resultado:
y al final una ayuda....
Para aquellos que prefieran una solución más sencilla existe la herramienta
Preview Wizard. Usando esta herramienta podrán generar automáticamente el código JavaScript para la visualización de uno o varios libros.
Os animo a probar estas APIs y ya de paso si alguno de vosotros las acaba usando en su site que no dude en enviarnos un correo con un link. Como siempre en un post posterior comentaremos las mejores implementaciones.
A cuidarse
Javier Arias González
