Jump to content
  • entries
    338
  • comments
    905
  • views
    259,887

Google Gadgets and Javascript


EricBall

909 views

I have been making updates to my Panoramic Photo Gallery: https://sites.google.com/site/ericballpanorama/ both adding newly stitched panoramas and revising older ones adding metadata and a watermark. Now I've reworked my main page to list the panoramas by location rather than in a simple ToC. At the bottom I've linked one of the panoramas, but what I'd really like to do is make that a slide show or a random panorama. With a normal site this would all be done in Javascript, but as this is Google, it's gotta be a Google Gadget.

 

Actually, in this case the gadget is mostly just a wrapper for the Javascript. I have a simple working gadget which randomly displays one panorama from a hard coded list. The problem is gadgets typically have a fixed height and the height of my panoramas varies. There's a gadget method which can be used to adjust the height, but I'm fighting with a the image being loaded asynchronously and therefore not knowing the height at the time the gadget is loaded.

1 Comment


Recommended Comments

Ah-ha, I got it!

 

 

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

<ModulePrefs title="Random Image" height="0">

<Require feature="dynamic-height"/>

</ModulePrefs>

<Content type="html">

<![CDATA[

<script type="text/javascript">

 

var theImages = new Array() // do not change this

// To add more image files, continue with the

// pattern below, adding to the array.

 

theImages[0] = 'https://sites.google.com/site/ericballpanorama/home/daytona-beach/Daytona%20Beach.jpg'

theImages[1] = 'https://sites.google.com/site/ericballpanorama/home/lower-manhattan/NYC%20skyline%202.jpg'

theImages[2] = 'https://sites.google.com/site/ericballpanorama/home/upper-east-side/RamadaView.jpg'

theImages[3] = 'https://sites.google.com/site/ericballpanorama/home/ponce-de-leon-inlet/auto.jpg'

 

document.write('<img src="'+theImages[Math.floor(Math.random()*theImages.length)]+'" border="0" width="100%" onload="gadgets.window.adjustHeight()">');

</script>

 

]]>

</Content>

</Module>

Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...