EricBall's Tech Projects

A blog by EricBall in General

Followers 9

entries
334
comments
900
views
258,193

Google Gadgets and Javascript

Entry posted by EricBall April 16, 2012

890 views

Followers 1

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.

Followers 1

1 Comment

Recommended Comments

EricBall 239

Posted April 16, 2012

Ah-ha, I got it!

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

</ModulePrefs>

<![CDATA[

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>