Gigapan Embedding Tutorials

Gigapan with Snapshots

2010-01-04T11:14:00.001-08:00

This demo will show how to create an embedded gigapan with selected snapshots appearing below the gigapan. Begin by choosing one of your gigapans which has some snapshots and launching the Embed Wizard for that gigapan (see the Welcome and Introduction post for instructions).

The Embed Wizard's default setting is to display the navigation controls, title bar, and some snapshots. The form will look similar to this:

Those settings are fine--all we need to do is to select which snapshots to include in the embed. As you can see in the form, there's a text box for entering the ID numbers for the snapshots to embed. To determine the snapshot ID numbers, hover your mouse over the snapshots in the Embed Wizard. To the right of the snapshots bar you'll see the snapshot title and description, date taken, etc. Immediately above the snapshot title is a number--that's the ID number of the snapshot you're currently hovering over with the mouse. Here's an example--the ID number is circled in red:

So, to specify which snapshots will be included in your embed, simply enter them as a comma-delimited list in the text box. For this example embed of the ant, I've decided to include snapshots 833, 9356, and 12907. Entering them in the text box and clicking the Generate HTML button results in the following code:

<iframe src="http://www.gigapan.org/media/gigapans/456/snapshots/833,9356,12907/iframe/flash.html?" frameborder="0" height="400" scrolling="no" width="100%"></iframe>

As we saw before in the previous posts, we'll want to adjust either the viewer's height or the iframe's height. For this example, I chose to keep the iframe height at 400 and set the viewer height to 268 (I used the red background trick shown in the previous posts along with some trial and error to arrive at that number). Here's the embed:

Looks good! Here's the code:

<iframe src="http://www.gigapan.org/media/gigapans/456/snapshots/833,9356,12907/iframe/flash.html?height=268" frameborder="0" height="400" scrolling="no" width="100%" ></iframe>

Finally, a couple notes:

You can change the order in which snapshots are displayed in your embed simply by changing the order in the comma-delimited list in the form (or in the iframe src URL).
The Embed Wizard currently does not provide a way to view snapshot titles or descriptions in the embed--we'll address that in the future.

Enjoy!

Variations on the Simple Embed

2010-01-04T11:13:00.000-08:00

For this demo, we'll show how to hide the title bar and/or the navigation controls. This demo builds upon the previous one, so make sure you've read that one first.

As in the previous example, launch the Embed Wizard (see the Welcome and Introduction post for instructions) and change the "Include any of the the N snapshots?" option to No.

To hide the navigation controls, set its popup menu in the form to Yes, as shown here:

Similarly, to hide the title bar in the embedded gigapan, set its popup menu in the form to No.

Here's what the embed looks like with a title bar, but no navigation controls:

And here's the code:

Here's what the embed looks like with navigation controls, but no title bar:

And here's the code (note that I reduced the height of the iframe attribute by 20 to account for the now absent title bar):

Finally, here's what the embed looks like with no navigation controls or title bar:

And here's the code:

Simple Embed

2010-01-04T11:12:00.000-08:00

For this first demo, we'll show how to embed just the gigapan, with no snapshots.

Launch the Embed Wizard (see the Welcome and Introduction post for instructions) and change the "Include any of the the N snapshots?" option to No. It should look similar to this:

Now click the Generate HTML button. Doing so will reveal the code plus a View Now button.

Feel free to click the View Now button. Doing so will open a new window displaying the embedded gigapan.

Now, to embed the gigapan in the blog, copy the HTML code in the text area. Now, in the Blogger editor for creating a new post, you can simply paste the copied code into the editor. Doing so will result in an embed which looks like this:

Not bad, but what if we want to increase the height so we can see more of the image? The obvious solution seems to be to simply increase the value of the height attribute in the <iframe> tag. Unfortunately, that won't do it. Here's the same code but with a height of 500 instead of 400.

So what's going on? The problem is that the height attribute is only controlling the height of the iframe, not the viewer itself. You can get a hint of that by observing all the blank space between the bottom of the embedded gigapans above and the paragraphs which follow them. Setting the background color of the iframe makes it clear. Here's the code to do so:

And here's the embedded gigapan with a red background color to illustrate the height of the iframe:

But, all is not lost. There's actually an undocumented (and thus unsupported) additional height parameter you can specify in order to set the height of the viewer. This additional height parameter is simply appended to the iframe's src URL, like this:

<iframe src="http://www.gigapan.org/media/gigapans/456/options/nosnapshots/iframe/flash.html?height=400" frameborder="0" height="400" scrolling="no" width="100%" style="background-color:red"></iframe>

Here's what it looks like with both height parameters set to 400:

OK, we're getting closer! But, clearly the iframe is now too small due to the margin (or, conversely, the viewer's height parameter is too large). It doesn't matter which parameter you change, but the general rule is that the viewer's height parameter will need to be smaller than the iframe's height parameter. Here's what it looks like with a viewer height of 365 and an iframe height of 400:

Looks good! Well, except for that red background. Removing the red background, we get:

Great! Here's the final code:

Welcome and Introduction

2010-01-04T11:11:00.000-08:00

This blog presents various examples of using the Gigapan Embed Wizard to embed gigapans into a blog.

To access the Gigapan Embed Wizard, first log into your gigapan.org account. In My Home -> Gigapans, find the gigapan you want to embed and then click the Embed link as shown in this example screenshot:

Clicking the Embed link will open the Embed Wizard for that gigapan. Note that only public panoramas can be embedded at this time. Here's an example screenshot of the Embed Wizard:

To generate code for embedding your gigapan, choose from the various options in the Embed Wizard form and then click the Generate HTML button. Generating the HTML will also reveal a View Now button which you can use to preview how your embedded gigapan will look in the browser.

Future posts in this blog will discuss the various options in more detail and show examples of the embedded gigapans.

Enjoy!