Scaling the skin when scaling a tour.
Posted: Tue Oct 22, 2013 1:00 am
I recently had a post where I was trying to automatically scale a tour for mobile devices in a responsive site. The issue was the tour would hang off of the responsive site, making the site, well for lack of a better description, non-responsive.
So, here is what I've found (Thanks to Martin for pointing me in the right direction).
The solution is to modify your responsive page and the Gardengnome Template (.ggt file) to % from fixed values and then to add a CSS class:
In an IFrame on my site was:
<iframe width="970px" height="375px" frameborder="0" src=" tour.html"></iframe>
Since I had given it a fixed size in Pano2vr, it will maintain that size no matter what.
I replaced the px size with %, example:
<iframe width="100%" height="100%" frameborder="0" src="tour.html"></iframe>
Then, the same needed to be done inside of the Garden Gnome output Template for future tours...
I also assigned a class to the iframe like
<iframe class="tourframe" scrolling="no" frameborder="0" src="tour.html"></iframe>
Then in your CSS add:
.tourframe {
width: 100%;
height: 355px;
overflow-y: hidden;
}
In CSS media queries you can also set tourframe to {display: none} if you don't want to show it on mobile and instead create a new link for full view.
The only issue is that the skin doesn’t seem to scale correctly. A work around can be to just left justify all important functions, but not an elegant solution at all…
Leading to my new question -
Does anyone know how to scale the skin along with scaling a tour in a responsive site?
I am not very technical and not even sure how the skin is added to a tour. But I do know that when I click fullscreen, the skin is scaled perfectly, so there must be a way
Thanks in advance!
Dean
So, here is what I've found (Thanks to Martin for pointing me in the right direction).
The solution is to modify your responsive page and the Gardengnome Template (.ggt file) to % from fixed values and then to add a CSS class:
In an IFrame on my site was:
<iframe width="970px" height="375px" frameborder="0" src=" tour.html"></iframe>
Since I had given it a fixed size in Pano2vr, it will maintain that size no matter what.
I replaced the px size with %, example:
<iframe width="100%" height="100%" frameborder="0" src="tour.html"></iframe>
Then, the same needed to be done inside of the Garden Gnome output Template for future tours...
I also assigned a class to the iframe like
<iframe class="tourframe" scrolling="no" frameborder="0" src="tour.html"></iframe>
Then in your CSS add:
.tourframe {
width: 100%;
height: 355px;
overflow-y: hidden;
}
In CSS media queries you can also set tourframe to {display: none} if you don't want to show it on mobile and instead create a new link for full view.
The only issue is that the skin doesn’t seem to scale correctly. A work around can be to just left justify all important functions, but not an elegant solution at all…
Leading to my new question -
Does anyone know how to scale the skin along with scaling a tour in a responsive site?
I am not very technical and not even sure how the skin is added to a tour. But I do know that when I click fullscreen, the skin is scaled perfectly, so there must be a way
Thanks in advance!
Dean