¡¡ Nuevo Webmasters Deluxe !!

Ahora Webmasters Deluxe ha cambiado de lugar. Puedes encontrarnos en www.webmastersdeluxe.com con más contenido, más funciones y más social.

A+ | a-

domingo, 22 de febrero de 2009

Crear un SlideShow con un Feed

Hay un widget muy interesante para mostrar feeds a través de palabras clave; indicamos una palabra y nos dará todas las noticias que encuentre con esa palabra. Esto se puede hacer con Google Ajax Feed API. Sin duda es un recurso muy interesante para mostrar en nuestro blog las últimas noticias relacionadas de forma automática. Probablemente hayas visto este recurso más de una vez, e incluso es probable que lo estés utilizando en alguna de sus diversas variantes.
Pero además se pueden conseguir aplicaciones más interesantes que las habituales, utilizando este sistema de lector de feeds. Una de ellas es crear un SlideShow que mostrará nuestra colección de fotos de forma automática. De fácil instalación en cualquier web, y con muy poco esfuerzo. Solo necesitarás tener las fotos que quieres mostrar en un servicio de almacenamiento de imágenes que soporte Feeds como Picasa o PhotoBucket. Puedes comprobar el efecto conseguido con este SlideShow. Veamos como hacerlo sin consumir recursos y tiempo;

1.- Primero necesitamos llamar a las librerías que vamos a utilizar. Utilizaremos las librerías ubicadas en los servidores de Google de forma pública para no tener que instalar nada. Para esto escribimos en el head de nuestra plantilla las siguientes líneas de código:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>


2.- A continuación introducimos en el body el código que servirá para mostrar las fotos en nuestra web.

<div id="slideShow" style="width:160px;height:160px;">Cargando Imagenes ...</div>

3.- Por último añadimos el código javascript en cualquier parte del código HTML de nuestra Web.

<script type="text/javascript">
function LoadSlideShow() {
var feed = "Tu_URL_del_Feed";
var options = {displayTime:2000, transistionTime:600, scaleImages:true};
var ss = new GFslideShow(feed, "slideShow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>


Debemos de cambiar la linea que dice var feed = "Tu_URL_del_Feed"; por la dirección URL del feed de nuestras fotos. Sirva como ejemplo el mismo código con la línea modificada:

<script type="text/javascript">
function load() {
var samples = "http://www.google.com/uds/solutions/slideshow/sample.rss";
var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>


Podemos configurar este último código con algunas variables para que muestre las fotos de forma personalizadas a nuestros requisitos. Por ejemplo se pueden configurar a partir de la variable options (agregándole parámetros separados con comas) los siguientes puntos...
  • cantidad de imágenes con numResults:cantidad
  • tiempo de duración de la transición con transitionTime:valor (en milisegundos)
  • tiempo que se muestran las imágenes con displayTime:valor (en milisegundos)
  • relación ancho/alto: scaleImages:true | false o con maintainAspectRatio:true | false

y otras muchas variables configurables que puedes consultar en la documentación. Funciona de forma muy simple de instalar, y no consume recursos. Una buena forma de hacer un SlideShow.


Para más información podeis consultar aquí, o ver el efecto conseguido aquí.

1 comentario:

  1. Hola!!!!!!!

    Es domingo, llueve y que mejor que tomar un buen mate y visitar los amigos de la cibernética, (mientras la familia duerme).

    Súper interesante, pero es muy temprano para pensar, jijiji, volveré y practicare para ves si me sale.

    Un besote y abrazo de oso.

    ResponderEliminar

Normas de publicación:
- El comentario debe de tener relación con la entrada
- Los comentarios anónimos están permitidos, pero serán moderados
- Argumenta tus comentarios de forma clara. Aporta información Relevante.
- No utilices unicamente Mayúsculas ni ortografías abreviadas del tipo texto SMS. Escribe correctamente.
- El Spam será borrado automaticamente.
- No hagas comentarios irrelevantes; serán considerados Spam.
- Evita las ideas generales y el lenguaje vulgar.
- Para dejar tu URL comenta con OpenID.
- Backlinks son automaticos.
- Los comentarios pueden tardar un tiempo mínimo en ser publicados.

NOTA: Los comentarios de los usuarios no reflejan las opiniones del editor. No se aceptarán bajo ningún concepto comentarios difamatorios, o faltas de respeto hacia los usuarios de este blog. Libertad de expresión Si, pero con educación.

  ©Diseño: Isi Roca.

Subir