JMiur [E]

Hace ya tiempo, Carlos, de Rincón del mar, me recomendaba leer una serie de páginas donde se mostraba una forma de utilizar las APIs de Google para crear slideshows con las imágenes alojadas en cualquier servicio que posea feeds como Picasa o Photobucket.

Todo es posible gracias al AJAX Feed API que permite leer cualquier feed RSS o Atom utilizando JavaScript (más información).

Esto nos abría una serie de posibilidades bastante sencillas de implementar ya que hay un wizard donde podemos hacerlo de manera más o menos automática.


El slideshow usa el mismo criterio y hay mucha información al respecto en la página con referencias pero, veamos los más sencillo.

Primero, necesitamos el script que llamamos desde la plantilla, desde un post o desde algún elemento HTML que agregamos. En todos los casos, escribimos:
<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>
Un detalle a tener en cuenta es que si ya empleamos el cargador de Google para otras cosas, la primera línea es innecesaria.

Luego, necesitamos colocar un DIV con un ID que es el lugar donde se mostrará:
<div id="slideShow" style="width:160px;height:160px;">Cargando ...</div>
Por último, agregamos el script con los parámetros del control:
<script type="text/javascript">
function LoadSlideShow() {
var feed  = "URL_delFeed";
var options = {displayTime:2000, transistionTime:600, scaleImages:true};
var ss = new GFslideShow(feed, "slideShow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>
¿Cómo podemos configurarlo? Utilizando la variable options, agregando parámetros separados con comas. Allí podemos
establecer:
  • la cantidad de imágenes: numResults:cantidad
  • mantener o no la relación ancho/alto: scaleImages:true|false (por defecto es true)
  • o bien maintainAspectRatio:true|false
  • el tiempo que permanecen visibles: displayTime:valor (en milisegundos, por defecto 3000)
  • el tiempo que dura la transición: transitionTime:valor (en milisegundos, por defecto 1000)
  • transformar o no las imágenes en enlaces: linkTarget:google.feeds.LINK_TARGET_BLANK (por defecto no)
  • habilitar o deshabilitar pausa con mouseover: pauseOnHover:true|false (por defecto es true)
  • habilitar panel de control: fullControlPanel:true
  • panel de control con íconos pequeños: fullControlPanelSmallIcons:true
El tamaño de las miniaturas puede establecerse con estas opciones:
  • thumbnailSize: GFslideShow.THUMBNAILS_SMALL
  • thumbnailSize: GFslideShow.THUMBNAILS_MEDIUM
  • thumbnailSize: GFslideShow.THUMBNAILS_LARGE
Hay muchas más y el código completo de un ejemplo que podemos ver acá.

31 comentarios:

LeanLeiva  

HAS RECIBIDO UN PREMIO PASA POR MI BLOG A RETIRARLO

http://spirit-dragon.blogspot.com/

Responder
Anónimo  

bello J, queda precioso!!!...que tengas buen lunes!!!

Responder
Anónimo  

:D Gracias por la referencia a la página del centro de buceo, JMiur.

Ojalá te pases algún día para bucear con nosotros en el Caribe colombiano. Cordialmente invitado.

Un saludo.

Responder
Anónimo  

Muy buen material y muy buen blog , será que ya lo he dicho mas de 2.000 veces y lo repito cada día más veces. JMiur==Dios diseño Web Yo=!Dios . Insisto en que el blog es cada vez mejor y mejor :D :D :D :D :D :D. Pero hay que admitirlo :P ahora si es un blog :X

Responder
JMiur  

Gracias, WINICUEVA-PES; es un honor.

Carlos: Tu descubriste esto así que la referencia es la que corresponde :)

LacraX: sós un exagerado :D

Responder
Unknown  

Este slide es precioso. Una pregunta, con respecto a los de picasa o los típicos que se ponen imágenes como slide.com es más liviana la carga del blog o es igual?

besos ronroneados

Responder
Emerald  

Sencillamente precioso!! Manos a la obra, estas cositas me encantan!:)
Gracias JMiur!
Pregunta... (no podía ser de otra forma! :D) todo lo colocamos por ej. en un post, hasta los parámetros? no se toca la plantilla? se pueden poner varios en una misma página sin crear conflictos?

Responder
JMiur  

Pau: Me da la impresión que es más rápido que los gadgets comunes justamente porque lee los feeds y no hace cosas raras.

Luz: No lo probé pero, imagino que si aunque habría que crear DIVS distintos para cada uno de ellos.

Responder
Anónimo  

Siento interrumpir con un comentario que no viene al caso, pero en mi plantilla la cual empecé a modificar a partir de Minima no se muestra el link para ver entradas anteriores, e intentado todo lo que e leído y no encuentro solución alguna, desearía que me pudieras ayudar. Aquí te dejo el link con mi código completo, espero tu pronta ayuda, muchas gracias.
http://docs.google.com/Doc?id=dfgr6rcf_0csxmjxgc

Responder
Anahí  

Ya lo anduve probando, y está muy bien, porque desliga un poco del artilugio de blogger. Lo que me costó es encontrar el rss que va según el album, por ej., en Flickr. Pero dando vueltas lo encontré.

Algo que ná que ver, JMiur, tengo problemas con lightwindow, ¿no se daría una vueltita por mi bló, doctor, a ver qué onda?

Saludos y gracias.

Responder
JMiur  

Poniiirgh: Fíjate si encuentras esto:
<!-- feed links -->
y debajo, agrega esto:
<b:include name='feedLinks'/>
<b:include name='nextprev'/>
son los dos codigos que faltan. El primero crea los enlaces que ves debajo de los blogs para suscribirse (si no lo quieres tener, no lo pones)
El segundo es el de la navegación del que hablas.

Si. Anahí, me pasó l omismo, es difícil encontrar la fuente del feed. Parecería que algunas no funcionan.

Vi tu blog. Parecería que el problema son losvideos del ultimo post porque todos los anteriores se ven bien. Allí, noto algo, en un post anterior colocas otro video de humyo pero, la URL es basante distinta, mucho mas larga. Me da la impresión que el tema viene por ahí. que las direcciones de los videos son erróneas.

Responder
Anónimo  

Gracias, pero los e puesto y no se ven mas las entradas

Responder
JMiur  

Poniiirgh:
Uffff. Me ha costado encontrar el maldito error. Es de sintaxis. La palntilla corregida está en mi blog de pruebas.

Primero, buscar esto y lo eliminas
<b:include name='nextprev'/>

Luego, como te dije antes, buscas esto:
<!-- feed links -->
y agregas las dos líneas que faltan:

<b:include name='feedLinks'/>
<b:include name='nextprev'/>

Ahora hay que corregie el erro de sintaxis. Buscas esto que está dos veces:
datalderPageUrl
debes reempalazarlo por esto:
data : olderPageUrl
sin espacios; aqui los coloco porque sino se transformarán en emoticones.

Es data dos puntos olderPageUrl todo seguido.

Lo mismo haces conesto:
datalderPageTitle
debe cambiarse por:
data : olderPageTitle
también sin espacios.

Esas tres palabras erradas hacían que el blog colapsara.

Si no se entendió porque los comentarios son bastante complicados de escribir, me envias un mail y te lo paso por correo.

Responder
Anónimo  

Vale, pues muchas gracias ahora mismo te envío el mail para evitar cualquier error, MUCHAS GRACIAS =)

Responder
JMiur  

Espero que sirva :D

Responder
Anónimo  

Siento el insulto que viene a continuación ya que va en desacorde a tu blog, pero ERES EL PUTO AMO, muchas gracias

Responder
JMiur  

Supongo que eso significa que funcionó :D

Responder
Anahí  

Gracias, JMiur, pero no, los enlaces están bien. Lo más raro es que en el IE funciona. :S

Responder
Anahí  

JMiur, por ahora lo solucioné quitando el lightw... y dejando sólo el enlace a los videos, para no estar pendiente del post: es que me tomo unas vacancioncitas, ¿vio? :D
Saludos, nos vemos.

Responder
JMiur  

Anahí:
Eso de los enlaces lo pensaba ayer ya que tampoco podía cargarlos en un blog mio pero, hoy si.

Lo que ahora noto en tu blog es que no termina de cargarse nunca.

Veo que un error que se muestra es respecto a un script: related_results_labels que no parece existir.

¿Has hecho algún cambio recientemente?
Es extraño porque el error parece estar sólo en el último post.

Responder
Anahí  

JMiur, el cambio que hice fue añadir el form. incrustado.
Un problema que puede ser es una etiqueta ("IV Flota"...mm¿?) con la que ya tuve problemas antes, y ahora la quité del post.
Y en la consola del FF me aprece un mensaje de error del prototype de google. |O
También tengo varios scripts que no uso, pero no esoty segura de cuáles, y por eso los dejo :P
Salute. Gracias.

Responder
Anahí  

Ah, y los expandibles.

Responder
JMiur  

El error de Prototype no es el causante, parece algo general, también lo tengo.

Eso de la IV Flota me hace pensar que tal vez venga por ese lado; ese feed tiene algún problema raro. Prueba quitar esa etiqueta aunque sea temporalmente.

Responder
Emerald  

Quedó precioso!
Se podrá poner como header? con las dimensiones adecuadas, debe ser más liviano que el que tengo actualmente.
Saluditos!!

Responder
JMiur  

Luz: Hasta donde sé, puede ponerse en cualquier parte.

Responder
Francisco  

Hola JMiur, antes de nada decirte que me encanta tu blog, siempre estoy aprendiendo cosas...GRACIAS.

Tengo una pequeña duda sobre este slide, y es referente a los links de las imagenes.. ya que se indica que para hacerlo habria que editar esta linea:

linkTarget : google.feeds.LINK_TARGET_BLANK

¿ Si pusiera por ejemplo 50 imagenes, se podria poner un link para cada una de las 50 imagenes o esto se refiere a un solo link para todas las imagenes ? No veo claro si eso se podria hacer, y si se pudiera como se tendria que escribir el codigo, haber si me lo aclaras, gracias.

Un Saludo.

Responder
JMiur  

Francisco:
Es algo que yo tampoco tengo claro, las pruebas que hice no me dieron resultado.

Responder
Unknown  

Gracias JMiur: gran apoyo este blog para implementar el slideshow. Ahora, según tu nota 11 del blog, cuesta encontrar el feed que opera con el show; probé flicker y photobucket, y no funcionan.

Favor si puedes dar tu suguerencia de que rss y con quien usar para que funcione. Gracias

Responder
Unknown  

Gracias: lo he conseguido con PICASA..........

Responder
Gus  

Hola, genial blog, mis felicitaciones.

Pude poner una galería con esta feed api sin sobresaltos.

El problema empieza cuando quiero poner dos galerías en la misma página.

Mas arriba le contestaste a Luz que habría que crear DIVS distintos para cada uno de ellos.

Lo he intentado y no pude.
Como tengo que hacer?

Desde ya muchas gracias.

Responder
JMiur  

Es que no están pensadas para eso sino para ser utilizadas solo una vez así que también deberían cargarse dos scripts con diferentes nombres etc.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR