12 Noviembre 2010 ~ 1 Comment

Galeria picasa en javascript

Picasa logoLas galerías de Picasa son una excelente opción cuando queremos publicar nuestras fotografías pues nos permiten georeferenciación, comentarios, puntuación, clasificación de albumes entre otras, especialmente cuando no quiere utilizar una solución especifica para almacenamiento. Pero de nada nos sirven estas fotografías si no podemos publicarlas dentro de nuestro sitio, allí es donde precisamente tiene su falencia picasa. El album embebido que ofrece es flash, lo que tiene implicaciones negativas especialmente por criterios de accesibilidad. El siguiente código autoría de  Anton Schevchuk permite utilizar javascript para mostrar nuestra galería sobre el sitio que queramos.

Aunque como tal el hecho de utilizar Javascript no necesariamente hace que nuestra galería sea accesible, la galería nos permitirá por lo menos evitar la problemática de la ausencia de flash en el navegador. Incluso, si el navegador no permite la ejecución de Javascript colocar un link en el <div> donde es remplazado el código javascript nos permitiría por lo menos ofrecer el vinculo al usuario (Gracias a @jhonfisc por la sugerencia).

Para utilizar esta galería debe colocar en el <head>

<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/picasa.gallery.js" type="text/javascript"></script>

Luego donde coloquen los scripts, donde user sera el user que tengan en Picasa y album será el nombre del album:

<script type="text/javascript">
    var user = 'AntonShevchuk';
    var album = 'DigitalPhotoRu';
    var maxres = 5; // 0 - for all;

    var url = 'http://picasaweb.google.com/data/feed/api/user/' + user +
'/album/' + album + '?kind=photo&alt=json-in-script&callback=renderer&access
=public&start-index=1';

    if (maxres != 0) {
        url = url + '&max-results=' + maxres;
    }
    loadJS(url);
</script>

Y finalmente en el lugar donde ira el código este <div>:

<div id="myGallery"></div>

Y claro, el codigo lo puedes descargar desde aquí. Eso si, de nuevo hago la salvedad que el código no es mi de autoría, el original lo pueden encontrar en “Google picasa for your site” de Anton Shevchuck, sin embargo le hice un par de modificaciones pues tenia la particularidad que si no colocabas el nombre y el album del autor no funcionaba con ningun otra galería :p

Código para galería javascript para picasa

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks
  • Add to favorites
  • Live

One Response to “Galeria picasa en javascript”

  1. juan heredia 17 Marzo 2011 at 1:17 am Permalink

    Hola me parece excelente esta pagina, informa muy bien acerca de como mejorar el uso de herramientas para sitios web…. felicidades


Vamos! Deja un comentario :)