Visor de fotografías en linea

El problema consistía en encontrar un visor de fotografias libre para las muestras de Bibliolabs el 30 de noviembre y visualizar las fotografías convertidas de negativo a color.

Debía cumplir las siguientes condiciones:

  • Libre
  • Sin publicidad
  • De fácil implementación
  • Que inicie la reproducción de fotos automáticamente
  • Que al final de la presentación regrese al principio y repita las imágenes nuevamente
  • Que cargara las imágenes, sea en una carpeta o de la nube, sin tener que modificar el código o exportar un nuevo programa
  • Que pudiera ser embebido en un código HTML

Se buscaron distintas herramientas que tomaran imágenes de Flickr, Dropbox, Onedrive, Picassa y ninguno se adaptó a las condiciones deseadas, así que se trabajó directamente con la API de Google y se creó un código que funciona según las especificaciones mencionadas anteriormente.

Las imágenes deben subirse en un álbum independiente de PicassaWeb: https://picasaweb.google.com/ es allí donde nuestro código irá a buscar las fotos a mostrar.

Luego de crear el álbum se abre y se busca la opción RSS

Se genera un código del cual únicamente nos interesa su URL, así que la copiamos en nuestro portapapeles

Luego de copiar la URL la agregamos en el siguiente código reemplazando la frase “pegar URL aquí”

<html>
<body bgcolor="#000000">
    <head>

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

    </head>

<div id="slideShow">Loading...</div>

<script type="text/javascript"> 
function LoadSlideShow() { 

    /**Rss Feed, abajo se pega la URL de Picassa MANTENIENDO LAS COMILLAS*/
    var feed = "Pegar_URL_aquí";
    var options = {displayTime:2000, transistionTime:600, scaleImages:false}; 
    var ss = new GFslideShow(feed, "slideShow", options); 
} 

google.load("feeds", "1"); google.setOnLoadCallback(LoadSlideShow); 

</script>
</html>

Este código puede pegarse en un bloc de notas y guardado con la extensión *.html

Al abrir este archivos cargará el visualizador