panorama embedding
Embedding a GigaPan on a Web Page

If you would like to embed a GigaPan panorama on a web page, you must first get the permission of the panorama's author. You must also agree to and abide by our terms of embedding. Alternatively, we have permission from Matt Deans for anyone to embed his Golden Temple panorama; see the instructions below for ready-to-go embed code for that panorama.

We're working on an easier to way to generate the embedding code, but for now, here's the recipe to follow. If you have any troubles or would like some help, please contact us at embedding@gigapan.org.

  1. Go to the web page with the panorama you would like to embed.

  2. Click on "Launch Full Screen Viewer"

  3. View the HTML source for the full screen viewer. This is a menu item in your web browser.

  4. Search for PanoramaViewer. You should find a line like this:

    var tag = new FlashTag("/viewer/PanoramaViewer.swf?url=http://share.gigapan.org/gigapans0/249/tiles/&suffix=.jpg&width=48088&height=8553&nlevels=9&cleft=0&ctop=0&cright=48088.0&cbottom=8553.0&startEnabled=1", "100%", "100%");

  5. You now need to extract the information which identifies the panorama. Copy just part of this line, starting with url=, and ending with &cbottom=somenumber. For example:

    var tag = new FlashTag("/viewer/PanoramaViewer.swf?url=http://share.gigapan.org/gigapans0/249/tiles/&suffix=.jpg&width=48088&height=8553&nlevels=9&cleft=0&ctop=0&cright=48088.0&cbottom=8553.0&startEnabled=1", "100%", "100%");

  6. Now, add the following to your web page. Insert the panorama info you extracted in the previous step.

    <script>
       function FlashProxy() {}
       FlashProxy.callJS = function() {}
    </script>
    <embed type="application/x-shockwave-flash"
    src="http://gigapan.org/viewer/PanoramaViewer.swf?Insert panorama information from step 5 here"
    height="400" width="600">

  7. You're done! At the very end of the embed tag, you can change height="400" width="600" to suit your page. You should have something that looks like this:

    <script>
       function FlashProxy() {}
       FlashProxy.callJS = function() {}
    </script>
    <embed type="application/x-shockwave-flash"
    src="http://gigapan.org/viewer/PanoramaViewer.swf?url=http://share.gigapan.org/gigapans0/249/tiles/&suffix=.jpg&width=48088&height=8553&nlevels=9&cleft=0&ctop=0&cright=48088.0&cbottom=8553.0"
    height="400" width="600">

  8. Here's an example of what it will look like when rendered in the browser:

Embedding the Golden Temple GigaPan on a Web Page

We invite you to embed the following GigaPan panorama in any web pages you like. Matt Deans photographed it and hereby gives permission to embed the panorama on any web site. Please include the credit "GigaPan panorama by Matt Deans".

Adding a panorama is just like adding a Flash video. Add the following lines to your web page (you may need to change height="400" width="600" to suit your page):

<script>
   function FlashProxy() {}
   FlashProxy.callJS = function() {}
</script>
<embed type="application/x-shockwave-flash"
src="http://gigapan.org/viewer/PanoramaViewer.swf?url=http://gigapan.org/gigapans0/84/tiles/&suffix=.jpg&width=37049&height=8500&nlevels=9&cleft=0&ctop=0&cright=37049.0&cbottom=8500.0"
height="400" width="600">

If you have any problems or need help, please contact us at embedding@gigapan.org.

Here is a working example: