TripTracker « Código al Descubierto

Fuentes web: Entradas; Comentarios

TripTracker

I. Introducción

Su finalidad es mostrar imágenes en formato de galería. Es bastante sencillo de instalar. Solo se necesita un fichero javascript que os podéis descargar en la parte de “Referencias”.

A su vez, existen numerosas opciones para personalizar dicha galería. Por ejemplo, podremos añadir a cada una de las fotos subtítulos como la fecha en la que se hizo, título de la foto, etc. También se puede configurar que las fotos se cambien cada cierto tiempo, entre otras cosas.

Todo esto anteriormente explicado de una forma muy sencilla que a continuación detallaré.

II. Uso de la librería

Como siempre, se hace referencia en la cabecera del fichero javascript que vamos a usar:

<script type=”text/javascript” src=”slide.js” mce_src=”slide.js”></script>

Seguidamente hay que definir que fotos van a formar parte de la galería así como los parámetros opcionales que queramos implementar. Para ello se implementa un pequeño código en javascript donde se define una variable que llamaremos “galería” y luego añadiremos fotos a esa variable. En los siguientes ejemplos se verá con más claridad. Existen varias posibilidades:

Uso básico:

<script type=”text/javascript”>
var viewer = new PhotoViewer();
viewer.add(‘FOTO1′);
viewer.add(‘FOTO’2);
viewer.add(‘FOTO3′);
</script>

Primero creamos la variable viewer que es del tipo “PhotoViewer”. Luego, añadimos todas las imágenes que queramos simplemente poniendo la ruta donde se encuentre.

Personalizando subtítulos:

var viewer = new PhotoViewer();
viewer.add(‘photo1.jpg’, ‘A special photo’, ‘11/01/2006 10:12′);
viewer.add(‘photo3.jpg’, ‘Just another caption’);

Como se puede apreciar, se puede meter un segundo parámetro que sea el título y un tercero que sea la fecha a la hora de añadir la foto a la galería.

Varias galerías:

var viewer1 = new PhotoViewer();
viewer1.add(‘photo1.jpg’);var viewer2 = new PhotoViewer();
viewer2.add(‘photo2.jpg’);Consiste simplemente en implementar dos variables del tipo “PhotoViewer”. A la hora de mostrarlas (Que veremos posteriormente), llamaremos a una variable o a otra.

Otras configuraciones:
Para configurar el visor y otras opciones alternativas de la galería, basta simplemente con esa variable javascript llamar a los métodos adecuados.

Los métodos que se pueden usar se encuentran en el tutorial de la web. Algunos ejemplos son:

var viewer = new PhotoViewer();
viewer.setSlideDuration(3000); // Duración de cada imagen.
viewer.enableAutoPlay();
viewer.setOnClickEvent(viewer.startSlideShow); // Al pulsar con el ratón, detiene la muestra.
viewer.setBackgroundColor(‘#ffffff’); // Imagen de fondo de la galería
[...]

Por último, habrá que “cargar” la galería que hemos definido con la variable “viewer”. Para ello, insertamos el siguiente código: