Hi,

I am trying to figure out how I can have a responsive size for my embedded pano based on screen size. Primarily this is because I want the pano to resize small to be viewable on an iPhone, google phone etc versus a desktop or iPad etc.

an example is: http://gallery.parismetrotrash.com/McParis/mcparismaxi/

The code I use to embed is:

<script src="http://gallery.parismetrotrash.com/tiles/beer196.js"></script>

<div id="pano" style="width:100%;height:100%;">
<noscript><table style="width:100%;height:100%;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
<script>
embedpano({swf:"http://gallery.parismetrotrash.com/tiles/beer196.swf", xml:"http://gallery.parismetrotrash.com/tiles/mcparismaxi.xml", target:"pano", html5:"fallback", height:"700", width:"700",passQueryParameters:true});
</script>
</div>

I don't want to resize based on html vs flash as some screens that only support HTML5 will show a lot more than the iPhone for example.

Any help is appreciated.

Thanks in advance,

Darren

Thanks, I tried that originally, but I want to have full control over the size and I want also a 1:1 ratio (I had issues controlling the depth when setting size to 100%. The code for ensuring this can be quite complex it seems. Also, it seems that it did not work in HTML5 mode when I did that, but only worked in flash mode. Though I did not follow up to see if it really was an issue or my configuration was an issue.

In the end I went with the following, quite simple solution which seems to work great.


<script src="http://gallery.parismetrotrash.com/tiles/beer196.js"></script>
<div id="pano" style="width:700px;height:700px;margin:0 auto;">
<noscript><table style="width:275px;height:275px;"><tr style="valign:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>

<script>
if (screen.width >= 641) {
embedpano({swf:"http://gallery.parismetrotrash.com/tiles/beer196.swf", xml:"http://gallery.parismetrotrash.com/tiles/coffee225.xml", target:"pano", html5:"fallback", height:"700", width:"700",passQueryParameters:true});
}
else
{
embedpano({swf:"http://gallery.parismetrotrash.com/tiles/beer196.swf", xml:"http://gallery.parismetrotrash.com/tiles/coffee225.xml", target:"pano", html5:"fallback", height:"275", width:"275",passQueryParameters:true});

}

</script>

Can be seen working here: http://gallery.parismetrotrash.com/Uncafe/cafeallonge/

Thanks,

D