My first Google Gadget to embed a flickr photoset with Galleria navigation
The xml link for this is here
Google Gadgets are really easy all you need to do is wrap some XML around html content.
Here’s more info on getting started and there is even an online editor for creating and hosting your own gadgets
If you’re interested in developing gadgets for Google Apps, the following guides will help you get started writing gadgets for the different Google Apps containers:
The code I used
<?xml version=”1.0” encoding=”UTF-8” ?>
<Module>
<ModulePrefs title=”__UP_myname__” author=“mhawksey”author_email=“m.hawksey@gmail.com” author_location=“Edinburgh”directory_title=“FlickrGalleria” title_url=”__UP_mylink__”description=“Emebed a flickr photoset with Galleria navigation”>
<Require feature=“dynamic-height”/>
</ModulePrefs>
<UserPref name=“myname” display_name=“Title” required=“true”default_value=“Galleria/Flickr Show” />
<UserPref name=“mylink” display_name=“Title link” />
<UserPref name=“photoset” display_name=“Photoset” required=“true”default_value=“72157626051720912”/>
<UserPref name=“mywidth” display_name=“Width” default_value=“100%”/>
<UserPref name=“myheight” display_name=“Height”default_value=“600px” />
<Content type=“html”>
<![CDATA[
<script type=”text/javascript”>
_IG_AdjustIFrameHeight();
</script>
<style type=”text/css”>
#galleria {
width: __UP_mywidth__;
height: __UP_myheight__;
}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
<script src=”http://www.rsc-ne-scotland.org.uk/mashe/galleria/galleria.js”></script>
<script src=”http://www.rsc-ne-scotland.org.uk/mashe/galleria/plugins/galleria.flickr.js”></script>
<script>Galleria.loadTheme(‘http://www.rsc-ne-scotland.org.uk/mashe/galleria/themes/classic/galleria.classic.js’);</script>
<div id=”galleria”>Loading…
<script type=”text/javascript”>
api_key = ‘4bb2dc0f5e1ef29c928d7e138c489508’
var flickr = new Galleria.Flickr(api_key);
flickr.getSet(‘__UP_photoset__’, function(data) {
$(‘#galleria’).galleria({
data_source: data,
image_crop: false,
show_info: true,
autoplay: false,
transition: ‘fade’,
preload: 3,
});
});
</script>
</div>
]]>
</Content>
</Module>
