You are not logged in.

Pano viewer in a table cell - How to?

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

1

Thursday, September 10th 2009, 12:54pm

Pano viewer in a table cell - How to?

I have produced my first KP Pano. Works great.
However I want to create a convential html page and display panos within the cells of a table. EG at the bottome of a page.

Say for example a 3 row, 3 column table. I would like to show a pano in row 2, column 1 and/or another pano in say row 3, column 2....
It is a simple request & task but I have failed miserably to achieve even getting one pano in a cell, let alone two!

How to please...

Thanks

(I am using Dreamwaver CS4)

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

2

Thursday, September 10th 2009, 10:32pm

Hi,

just put the <div> inside the cell where krpano should be embedded ,
e.g.
here is a simple example: (this example is also included in the 1.0.7 download package)
http://krpano.com/examples/javascript1/

best regards,
Klaus

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

3

Thursday, September 10th 2009, 11:26pm

Thank you, Klaus...
I was putting everything in the cell... not just the div!

I'm having fun with KRpano. I am in the process of converting some existing flat panos into the Flash player but now realise I need more hardware fo sphericals! *cry*

I will need to save up for a NN5...

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

4

Friday, September 11th 2009, 3:49pm

I have followed your instructions but I cannot get it to work in a cell of a table by putting the 'div' into the cell. I must be doing something wrong. *confused*
The following is the code WITHOUT table & works perfectly in full page & full screen:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<html> 
<head> 
<title>test pano1</title> 
</head> 
<style> 
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; } 
* html, * html body{ overflow: hidden; } 
a{ color:#AAAAAA; text-decoration:underline; } 
a:hover{ color:#FFFFFF; text-decoration:underline; } 
</style> 
<body> 
<div id="krpanoDIV"><noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript> 
</div> 
<script type="text/javascript" src="swfobject/swfobject.js"></script> 
<script type="text/javascript" src="swfobject/swfkrpanomousewheel.js"></script> 
<script type="text/javascript"> 
// <![CDATA[ 
if (typeof(deconcept) !== 'undefined') 
{ 
if (deconcept.SWFObjectUtil.getPlayerVersion().major >= 9) 
{ 
var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000"); 
so.addParam("allowFullScreen","true"); 
so.addVariable("xml", "IMG_5197westbury2400pxh.xml"); 
if (so.write("krpanoDIV")) { var mousewheelfixes = new SWFkrpanoMouseWheel(so); } 
} 
else 
{ 
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/" target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr></table>'; 
} 
} 
else 
{ 
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>swfobject.js not found<br/><br/></center></td></tr></table>'; 
} 
// ]]> 
</script> 
</body> 
</html>


However, when I add a 3 x 3 table and move only the div (into the centre cell of this example) as per the following code:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<html> 
<head> 
<title>test pano1</title> 
</head> 
<style> 
body{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF; background-color:#000000; margin:0; padding:0; } 
* html, * html body{ overflow: hidden; } 
a{ color:#AAAAAA; text-decoration:underline; } 
a:hover{ color:#FFFFFF; text-decoration:underline; } 
</style> 
<body> 

<table width="750" border="1" cellspacing="1" cellpadding="1"> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td><div id="krpanoDIV"><noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript> 
</div></td> 
<td>&nbsp;</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
<td>&nbsp;</td> 
</tr> 
</table> 

<script type="text/javascript" src="swfobject/swfobject.js"></script> 
<script type="text/javascript" src="swfobject/swfkrpanomousewheel.js"></script> 
<script type="text/javascript"> 
// <![CDATA[ 
if (typeof(deconcept) !== 'undefined') 
{ 
if (deconcept.SWFObjectUtil.getPlayerVersion().major >= 9) 
{ 
var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000"); 
so.addParam("allowFullScreen","true"); 
so.addVariable("xml", "IMG_5197westbury2400pxh.xml"); 
if (so.write("krpanoDIV")) { var mousewheelfixes = new SWFkrpanoMouseWheel(so); } 
} 
else 
{ 
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/" target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr></table>'; 
} 
} 
else 
{ 
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>swfobject.js not found<br/><br/></center></td></tr></table>'; 
} 
// ]]> 
</script> 
</body> 
</html>


All I get is a black screen with a white table and NO Flash pano as per:




What am I doing wrong???? *confused*

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

5

Friday, September 11th 2009, 5:14pm

try this i may be wrong. make a div inside the table cell then put all krpano stuff inside that div.

<table width="750" border="1" cellspacing="1" cellpadding="1">
<tr>
<td><DIVNAME>

<div id="krpanoDIV"><noscript><table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Javascript not activated<br><br></center></td></tr></table></noscript>
</div>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfobject/swfkrpanomousewheel.js"></script>
<script type="text/javascript">
// <![CDATA[
if (typeof(deconcept) !== 'undefined')
{
if (deconcept.SWFObjectUtil.getPlayerVersion().major >= 9)
{
var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000");
so.addParam("allowFullScreen","true");
so.addVariable("xml", "IMG_5197westbury2400pxh.xml");
if (so.write("krpanoDIV")) { var mousewheelfixes = new SWFkrpanoMouseWheel(so); }
}
else
{
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br><br>Adobe Flash Player 9 needed<br><br><br><a href="http://www.adobe.com/go/getflashplayer/" target="_blank"><IMG SRC="http://www.macromedia.com/images/shared/download_buttons/get_flash_player.gif" BORDER="1"></a><br>...click here to download...<br><br><br><br></center></td></tr></table>';
}
}
else
{
document.getElementById("krpanoDIV").innerHTML = '<table width="100%" height="100%"><tr valign="middle"><td><center>ERROR:<br/><br/>swfobject.js not found<br/><br/></center></td></tr></table>';
}
// ]]>
</script>

</DIVNAME>td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>$nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

6

Friday, September 11th 2009, 6:32pm

Hi

Thank you for the reply and your efforts. It is much appreciated.

Although there was a couple of minor syntax errors which I corrected, { a closing td as td> and a nonbreaking space as $nbsp }. Regretfully your idea did not work. All I get is the black screen & white table as per the image above. *confused*

I tried as suggested by Klaus, just dragging the 'DIV' into a cell and got the black screen with white table. Dragging the same 'DIV' out from the cell, the flash pano works perfectly....

I'm flumuxed!

*question* *question* *question*

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

7

Monday, September 14th 2009, 1:57pm

bump - Help anyone?

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

8

Monday, September 14th 2009, 10:30pm

Hi,

can you upload your example anywhere?
that will make it easier to find the problem

best regards,
Klaus

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

9

Tuesday, September 15th 2009, 12:55am

Quoted from "klaus.krpano"

Hi,

can you upload your example anywhere?
that will make it easier to find the problem

best regards,
Klaus

Hello Klause

Thanks for responding.



The pano is here It is a test cylindrical pano



The html page code is as per post 4. I did try your 'put the div in the cell but no go.

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

10

Tuesday, September 15th 2009, 5:37am

Hi DonaldG,

Quoted from "DonaldG"

I did try your 'put the div in the cell but no go.
Yes but, can you upload this "div in the cell version" that does not go..... just to see what does not go inside.. *confused*
Your code above seems to be correct in my opinion. *huh*

Salut.

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

11

Tuesday, September 15th 2009, 1:42pm

Hi,

yes, as michel already said, please upload the not working html

best regards,
Klaus

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

12

Tuesday, September 15th 2009, 11:29pm

Hi Michel & Klaus

Thanks for your replies
I realised last night that I should have uploaded that & not the pano itself.

Below is the link to the complete set of directory files (Excluding the licence file!)

There are two html files...
One marked ORIGINAL - this works perfectly, full page & full screen...
The one marked TABLE has only the 'div' moved into the centre cell of a 3 x 3 and results in the black page with white table as per above...

Click there to d/l wg.rar (15Mb)
EDIT: The table page in the rar file has all the code in the cell...The link below has the 'div' only in the table cell.

Click here to see online examples of the good & bad pages.

Thanks
Donald

EDIT:
Platform:
quad core + 4GBram
Vista Ultimate (32) + Flash Player v10

This post has been edited 2 times, last edit by "DonaldG" (Sep 16th 2009, 8:29am)

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

13

Wednesday, September 16th 2009, 10:02pm

updated message above

(The links, especially the last link)



Thanks

michel

Professional

Posts: 1,153

Location: ANDORRA

Occupation: TV

  • Send private message

14

Wednesday, September 16th 2009, 10:44pm

Hi DonaldG,

I just tried your link....
It works perfectely with Firefox... *smile* (version 3.5.3)
But do not work in Explorer... *confused* (version 8.0.6001.18702)

Do not know why... *wacko*

If I find something more I will tell you. *unsure*

Salut.

VN2009

Professional

Posts: 1,336

Location: Duluth MN

  • Send private message

15

Wednesday, September 16th 2009, 11:49pm

put IE8 into compatability mode and you can test how it will work with IE7 also. Google standalone IE6 and you can find a standalone download to test IE6 without installing it.

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

16

Thursday, September 17th 2009, 10:34am

@ Michel:
My sincere thanks. I just tried it in Firefox & it worked perfectly just as I want it to. However, I must get it to work in all current versions of Internet Explorer.

It appears there it may be some incompatability with Flash Pano Viewer or KRpano 1.0.8 when the pano is placed in a table cell that shows up in IE8.

I did try to view it with flash 9(?) but it was the same as in Flash 10.

The problem I have is that I am still very new to the concept of Flash panos & still in learning mode! *g*

Perhaps Klaus can come up with a solution....

@ vn2009: Thanks for the info - I didn't know that *smile*

klaus.krpano

Administrator

Posts: 13,499

  • Send private message

17

Friday, September 18th 2009, 10:43am

Hi,

Quoted from "DonaldG"

It appears there it may be some incompatability with Flash Pano Viewer or KRpano 1.0.8 when the pano is placed in a table cell that shows up in IE8.
no, this has nothing to do with krpano or flash,
it's purely a HTML/Browser problem

it seems the 100% width and height makes problem in Quircksmode (no DOCTYPE in the HTML):

Source code

 
1

var so = new SWFObject("krpano.swf","krpanoSWFObject","100%","100%","9.0.28","#000000");


try using a fixed size, e.g:

Source code

 
1

var so = new SWFObject("krpano.swf","krpanoSWFObject","700","200","9.0.28","#000000");


best regards,
Klaus

DonaldG

Beginner

  • "DonaldG" started this thread

Posts: 18

Location: Somerset, UK

Occupation: Retired CEO

  • Send private message

18

Friday, September 18th 2009, 1:06pm

BINGO!



Klaus, you are a star! *thumbsup* That worked a treat - I will be able to go on with the development of the page.

Thank you very much. *thumbup*

Similar threads