Jquery picasa album scroller

Is it necessary to build an alternative picasa viewer when picasa itself provides nice flash gallery viewers ? for webmasters it turns out that sometimes it can be necessary to hide picasa details, and thanks to picasa itself providing various remote server access, you can use your albums within any kind of rss or json enabled application. We provide here an example of a JSON - jquery powered slideshow that takes input from any picasa album. The advantage of using picasa over hosted or specific applications such as famous menalto's gallery of coppermine is that picasa does resizing jobs for you, and offers up to 1 GB of free online image storage which largely enough for any small website presentation.

Picasa in a few words

Picasa is in fact the name of the windows based application, owned distributed by google, that does vairous image related jobs, most important of them is indexing and displaying. A simple publish button in the picasa application will transfer any chosen image to a picasa hosted album, provided that you have a google account. picasa Albums can be viewed publicly or restricted and are accessible online via URLs.

Jquery's Gallery scroller (jqGalScroll)

the jqGalScroll plugin takes list of images and creates a smooth scrolling photo gallery scrolling vertically, horizontally, or diagonally. The plugin will also create pagination to allow you to flow through your photos and integrates the jquery easing library. As usual it processes HTML code and as such is a nice clean way of implementing a slide show.

Integrating picasa into jqGalScroll

  1. download and test jquery, jquery easing plugin and jqGallScroll plugin following instructions on jqGallScroll's website
  2. create your album and extract the RSS url of the album following detailed instructions from "Documenting Picasa" : copy the url and replace alt=rss with alt=json
  3. chack out the fedd to see how images are returned. : you might have to modify the javascript below to adapt to picasa'json images thumbnail array.
  4. replace the ul and li html tags in the jqGqlScroll plugin and type the javascript method the reads picasa's json input :<script>
    function output(data)
    {
    document.writeln( '<ul id="one">');
    for (var i = 0; i < data.feed.entry.length; i++)
    {
    var item = data.feed.entry[i];
    var title = item.title.$t;
    var imageurl = item.media$group.media$thumbnail[0].url;
    var description = item.media$group.media$description.$t;
    var link = item.link[2].href;
    document.writeln("<li><a href='" + link + "'><img src='" + imageurl + "' border='0'  /></a></li>" );
    }
    document.writeln( '</ul>');
    }
    </script>
    <script src="http://picasaweb.google.com/data/feed/base/user/documentingpicasa?category=album&alt=json&callback=output&access=public"></script>
  5. Try out and let us know how it went  !!

See also :

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *