Best html code to embed panorama

How to make a panorama page like this: http://flashpanoramas.com/player/test/gallery_window.html?
Use this html code as a template:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Panorama example</title>
<style type="text/css">
<!--
/* hide from ie5 mac \*/
html {
  height: 100%;
  overflow: hidden;
}
#flashcontent {
  height: 100%;
}
/* end hide */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #eee;
}
-->
</style></head>

<body>
<script type="text/javascript" src="/files/swfobject.js"></script>		
<script type="text/javascript">
function closeWindow() {
	window.close();
	return true;
}</script>
<div id="flashcontent">This content requires 
  <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a>.
  <br />
  Built on <a href="http://flashpanoramas.com/player/">Flash Panorama Player</a>.
</div> 
<script type="text/javascript">
  var so = new SWFObject("show_pano.swf", "pano", "100%", "100%", "6.0.65", "#999999"); 
  so.addVariable("redirect", window.location);
  so.addVariable("movie", "galleryPack.swf");
  so.addVariable("xml_file", "");
  so.addParam("base","");
  so.addParam("allowFullScreen","true");
  so.addParam("allowScriptAccess","sameDomain");
  so.write("flashcontent");
</script>
</body>

Explanations:

1. Code in head is using to make flash window to take 100% height without scrollbars and margins in Mozilla browsers:

<style type="text/css">
<!--
/* hide from ie5 mac \*/
html {
  height: 100%;
  overflow: hidden;
}
#flashcontent {
  height: 100%;
}
/* end hide */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #eee;
}
-->
</style>

2. To create a Flash object use SWFObject:

<script type="text/javascript" src="/files/swfobject.js"></script>

Copy the file swfobject.js to your server and give the correct path to src=”/files/swfobject.js”

3. This javascript function is an alternative way to open the fullscreen window (if user has Flash player version less then 9.0.28 installed):

<script type="text/javascript">
function closeWindow() {
	window.close();
	return true;
}</script>

4. Main div tag for the Flash panorama:

<div id="flashcontent">This content requires 
  <a href="http://www.adobe.com/go/getflashplayer/">Adobe Flash Player</a>.
  <br />
  Built on <a href="http://flashpanoramas.com/player/">Flash Panorama Player</a>.
</div>

Place your text hint inside the div tag. Users without Flash Player or with disabled Javascript will see this text (and search engines will find it too).
For multiple panoramas on the same web page don’t forget to change id=”flashcontent”. Each panorama div object should have unique id.

5. Create SWFObject:

var so = new SWFObject("show_pano.swf", "pano", "100%", "100%", "6.0.65", "#999999"); 

This code uses link to show_pano.swf file instead of direct link to the pano file to check Flash Player version. If the user has Flash Player 9 installed, show_pano.swf redirects to the main panorama movie. If user dosn’t, he will get a message to update Flash Player without leaving the page (Adobe Express Install). You can find show_pano.swf file in plugin folder of the Flash Panorama Player package.
If you are sure that visitor has the last Flash Player version (inner site page), you can use the direct link to the panorama file (works faster):

var so = new SWFObject("myPano.swf", "pano", "100%", "100%", "9", "#999999"); 

Second parameter “pano” is panorama identifier (should be unique if you have multiple panoramas on the same page).
3rd and 4th parameters (“100%”, “100%”) are width a height of the Flash movie. Use smaller values if you need a margins to place some other content on the page (adverising, “how to use” instruction, copyrights and so on…).
5th param is required version of Flash Player (“6.0.65″ for Express Install support or “9″ for the direct link to the main panorama movie).
6th param “#999999″ is the movie background (it’s visible until the main panorama loader loads). Change it in conformity with your design needs.

6. Redirect url for Express Install feature (calculated automatically using window.location):

so.addVariable("redirect", window.location);

7. Main panorama movie path. Loads after show_pano.swf checks Flash Player version:

so.addVariable("movie", "galleryPack.swf");

8. Path to xml file with panorama advanced params:

so.addVariable("xml_file", "");

means there is no param files to load.

so.addVariable("xml_file", null);

means the movie will try to load the default param file (http://flashpanoramas.com/player/parameters)

so.addVariable("xml_file", "panoFolder/myParams.xml");

specifies to load “panoFolder/myParams.xml” param file.

9. You can use this param to change the base of relative urls in the movie (http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_04157):

so.addParam("base","");

10. Make fullscreen feature allowed for the Flash movie:

so.addParam("allowFullScreen","true");

11. Allow javascript access to the Flash movie:

so.addParam("allowScriptAccess","sameDomain");

12. Write SWFObject to the flashcontent div tag. Don’t forget to change this string if you changed id parameter in the div tag (for multiple panoramas, for example):

so.write("flashcontent");

Use comments if you have questions or suggestions about this code.

This entry was posted on Tuesday, November 21st, 2006 at 10:01 am and is filed under Flash, Flash Panorama Player, Site design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Comments so far

  1. Hi – really nice example:

    For the code ignorant amoung us – me, can you put everything we need to achieve this into a directory and alow us to download it.

    I’m afraid my heart sinks when i see a page of code

    thanks in advance

    Peter

  2. Hi,
    not quite clear here:

    12. Write SWFObject to the flashcontent div tag. Don’t forget to change this string if you changed id parameter in the div tag (for multiple panoramas, for example): so.write(“flashcontent”);

    What should be changed here?
    If my ID was [var so = new SWFObject("myPano.swf", "pano123", "100%", "100%", "9", "#999999");].
    It should look like this? -> [so.write("pano123");]

    Thanks – Peter

  3. [...] plugin for flash Panorama Player &187 … 2. To create a flash object use SWFObject: …http://flashpanoramas.com/blog/2006/11/21/best-html-code-to-embed-panorama/Adobe Builds Open Screen for a Consistent Web View – NewsFactor NetworkAdobe&39s forthcoming AIR [...]

  4. how do u embed the flash panorama using embed src to be used with external interface?

  5. Выполняю установку и настройку различных CMS систем.
    Предоплата 50% стоимость работы от 400р.
    Оплата Web Main или Яndex деньги.
    Р?нформация для СЃРІСЏР·Рё ISQ 429606266 Александр.

  6. Hi… this example is excellent..I have some questions

    1) can you tell me how to put link to each image in panoremic image .these links can be placed verticaaly on right side of the screen .
    when a user clicks on the link that image should be loaded and the panorimic show must start from that part .

  7. Keep up the superb work , I read few posts on this internet site and I conceive that your website is very interesting and holds sets of excellent information.

  8. Thanks for sharing your thoughts on wordpress. Regards

Have your say

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.