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=[email protected]” 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>

chevron_left
chevron_right

Join the conversation

comment 1 comment

Comments are closed.

css.php