Picasa Web Albums







Picasa Web Albums

You can sign up for a Free Picasa Account with your Google Account.






Example Gadget URL:


http://hosting.gmodules.com/ig/gadgets/file/106323307000219006410/picasa-gallery.xml

You can fully customize your Picasa Web Photo Gallery with a Google Gadget Editor (GGE)

(Default Settings, CSS Style , Layout etc...)

Or

> Add Gadget by URL (above) in Google Sites.

> Copy the RSS URL on the right of your Picasa Gallery.

> Add the RSS URL to your Gadget 'Properties'.



You can now also add a Geotag Location to your photos in Picasa.

So you have the ability to create games or photo tours using Google Maps and Google Earth.

Where in the World Game (Picasa Web Images game on Google Maps).

Also, you can Upload to Panoramio and view on Google Earth.

Example Picasa Gadget:


My Picasa Photos



<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="__UP_title__"
directory_title="Picasa Web Photos"
title_url="__UP_gallery__"
author="Sophia B.; George R."
author_location="Mountain View, CA; Cambridge, MA"
author_affiliation="Google Inc."
author_email="George.Feedback+Picasa@gmail.com"
height="300"
screenshot="http://www.google.com/ig/modules/picasa.png"
thumbnail="http://www.google.com/ig/modules/picasa-thm.png"
description="Browse your Picasa Web Photos on your homepage.">
<Require feature="dynamic-height"/>
<Require feature="setprefs"/>
</ModulePrefs>
<UserPref name="feed" display_name="Picasa Web RSS Feed"
default_value="http://picasaweb.google.com/data/feed/base/user/roryrocits/albumid/5375859069603090785?kind=photo&amp;alt=rss&amp;hl=en_US"
datatype="string" required="true"/><UserPref name="title" display_name="Title" default_value="My Picasa Photos"
datatype="string" required="true"/>
<UserPref name="gallery" display_name="Title URL" default_value=""
datatype="string" required="false"/>
<UserPref name="desc" display_name="Show description" default_value="true"
datatype="bool"/>
<Content type="html">
<![CDATA[
<style>
.img__MODULE_ID__ {
border-width:1px;
}
.arrow__MODULE_ID__ {
text-decoration:none;
cursor:pointer;
font-size:20px;
color:#3366cc;
vertical-align:top;
padding-bottom:4px;
}
.sourceLink__MODULE_ID__ A:link {
color:#7777cc;
}
.sourceLink__MODULE_ID__ A:visited {
color:#7777cc;
}
#photoDiv__MODULE_ID__ {
}
#description__MODULE_ID__ {
padding-top:4px;
font-size:11px;
text-align:center;
}
#photoNum__MODULE_ID__ {
font-size:smaller;
padding-right:6px;
padding-left:6px;
}
</style>

<div id="photoDiv__MODULE_ID__">
<table cellpadding="0" cellspacing="0" width="100%" class="photoTable__MODULE_ID__">
<tr>
<td width="50%" align="right">
<div class="arrow__MODULE_ID__" onclick="prevPhoto__MODULE_ID__()">&laquo;</div>
</td>
<td align="center" id="photoNum__MODULE_ID__">
</td>
<td width="50%">
<div class="arrow__MODULE_ID__" onclick="nextPhoto__MODULE_ID__()">&raquo;</div>
</td>
</tr>
<tr>
<td colspan="3" align="center" width="100%">
<div id="photo__MODULE_ID__">
<a target=_blank href="" id="picasa_link__MODULE_ID__"><img id="picasa_img__MODULE_ID__" class="img__MODULE_ID__" src=""/></a>
</div>
</td>
</tr>
</table>
<div id="description__MODULE_ID__"></div>
</div>

<script>
var prefs__MODULE_ID__;
var index__MODULE_ID__;
var photoObjects__MODULE_ID__;
var xml__MODULE_ID__;

function loadPhotos__MODULE_ID__() {
prefs__MODULE_ID__ = new _IG_Prefs(__MODULE_ID__);
index__MODULE_ID__ = prefs__MODULE_ID__.getInt('index');
var feed = prefs__MODULE_ID__.getString('feed');
feed = feed.replace(/\/base\//g, '/api/');
feed = feed.replace(/&amp;/g, '&');
_IG_FetchXmlContent(feed, parseAndDisplayPhotos__MODULE_ID__);
}

function value__MODULE_ID__(parent, tag) {
return _hesc(parent.getElementsByTagName(tag).item(0).firstChild.nodeValue);
}

function photoObject__MODULE_ID__(photosrc, photolink, description) {
this.photoSrc = photosrc;
this.photoLink = photolink;
this.description = description;
}

function parseAndDisplayPhotos__MODULE_ID__(xmlDoc) {
var items = xmlDoc.getElementsByTagName('item');
var body = document.getElementsByTagName('body')[0];
var maxAllowedWidth = body.scrollWidth;
var maxAllowedHeight = body.scrollHeight - 24;
// IE workaround
if (maxAllowedHeight < 100) {
maxAllowedHeight = maxAllowedWidth;
}
if (prefs__MODULE_ID__.getBool('desc')) {
maxAllowedHeight -= 20;
}
photoObjects__MODULE_ID__ = new Array(items.length);
for (var i = 0; i < items.length; i++) {
var item = items.item(i);
var description = '';
if (item.getElementsByTagName('description').length > 0 &&
item.getElementsByTagName('description').item(0).firstChild) {
description = value__MODULE_ID__(item, 'description');
}
var photolink = value__MODULE_ID__(item, 'link');
var photosrc = '';

// Picasa RSS XML format changed: try them all, be permissive
var thumbnails = item.getElementsByTagName('media:thumbnail');
if (thumbnails.length == 0) {
thumbnails = item.getElementsByTagName('thumbnail');
}
if (thumbnails.length > 0) {
var biggest = 0;
for (var j = 0; j < thumbnails.length; ++j){
var thumb = thumbnails.item(j);
var width = parseInt(thumb.getAttribute('width'));
var height = parseInt(thumb.getAttribute('height'));
if (width > biggest && width < maxAllowedWidth &&
height < maxAllowedHeight ) {
biggest = width;
photosrc = thumbnails.item(j).getAttribute('url');
}
}
if (photosrc == null) {
photosrc = value__MODULE_ID__(item, 'thumbnail');
}
} else {
photosrc = value__MODULE_ID__(item, 'photo:thumbnail');
}
photoObjects__MODULE_ID__[i] =
new photoObject__MODULE_ID__(photosrc, photolink, description);
}
loadPhoto__MODULE_ID__(index__MODULE_ID__);
}

function nextPhoto__MODULE_ID__() {
++index__MODULE_ID__;
if (index__MODULE_ID__ >= photoObjects__MODULE_ID__.length) {
index__MODULE_ID__ = 0;
}
loadPhoto__MODULE_ID__(index__MODULE_ID__);
}

function prevPhoto__MODULE_ID__ () {
--index__MODULE_ID__;
if (index__MODULE_ID__ < 0) {
index__MODULE_ID__ = photoObjects__MODULE_ID__.length - 1;
}
loadPhoto__MODULE_ID__(index__MODULE_ID__);
prefs__MODULE_ID__.set('index', index__MODULE_ID__);
}

// IE6 bug: if this is invoked through an <a onclick>,
// it doesn't load the image, if through a <div onclick>, it does.
function loadPhoto__MODULE_ID__(index) {
_gel('photoNum__MODULE_ID__').innerHTML = Number(index + 1) +
'&nbsp;of&nbsp;' + photoObjects__MODULE_ID__.length;
var photoObject = photoObjects__MODULE_ID__[index];
_gel('picasa_img__MODULE_ID__').src = photoObject.photoSrc;
_gel('picasa_link__MODULE_ID__').href = photoObject.photoLink;
if (prefs__MODULE_ID__.getBool('desc')) {
_gel('description__MODULE_ID__').innerHTML = photoObject.description;
}
_IG_AdjustIFrameHeight();
}

_IG_RegisterOnloadHandler(loadPhotos__MODULE_ID__);

</script>

]]>
</Content>
</Module>