Picasa Web AlbumsYou 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
(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'.
Also, you can Upload to Panoramio and view on Google Earth.
Example Picasa Gadget:
<?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&alt=rss&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__()">«</div> </td> <td align="center" id="photoNum__MODULE_ID__"> </td> <td width="50%"> <div class="arrow__MODULE_ID__" onclick="nextPhoto__MODULE_ID__()">»</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(/&/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) + ' of ' + 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>
|
Google Gadget Editor
Simple Custom Gadgets and Test your Google Gadget :
|
|