Insert tour as window into pre-existing HTML page

[JDoogan]

I'm not too hot on html but have a basic knowledge and can put together and upload a site.

How do you insert the VR tour window into an existing HTML page? I am wanting to put together a separate website for virtual tours which will feature a gallery of tours. A bit like what is on offer here, though I will probably go for something simpler. I just want to keep a consistent top menu. http://www.360imagery.co.uk/virtual-tou ... folio.html .
Thanks in advance.

[360Texas]

Well it appears they are not using a Responsive design web page so that makes it somewhat easy to explain.

Let it be known that I do not condone using someone else web sites, but there are HTML code lessons to be learned for those with inquisitive minds.

Click your link and go to their site. Right mouse click on their page.. and select "View Source". That brings up their page in code format

Scroll down until you see the placement in /head or /body of this code snippet "p2q_embed_object.js"

and this code snippet set about using iFrames. I think this code is just a link to pano2vr embed the panorama into their main page.

<!-- Begin Virtual Tour iFrame -->
Code here
<!-- End Virtual Tour iFrame -->

AND then you might do a global Pano2vr forum search for the widely used "iFrame" for more suggestions on this technique

[Don]

Excellent Dave, I agree, "View Source" on any web page and learn, learn, learn. Seems there are only 2 methods to include panos in an existing web page:

Option #1 is a lot of work: Copy & modify the code, i.e. html & javascripts from your pano_1.html, pano_2.html, pano_3.html into the single existing web page. Rename each container div tag, i.e. container_1, container_2, container_3, etc. Use CSS to resize each container div tag as desired. Be sure each pano's tile folder is uniquely named, i.e. tiles_1, tiles_2, tiles_3, etc. Share the images folder amongst all the panos. This option is lots of work.

Option #2 is easiest: place one or more iframes on the exist web page. Size each iframe as desired. For thumbnail-sized iframes, the trick is to scale the iframe's content using a CSS style so the entire pano displays, i.e. assign class="iFrame" to each iframe tag, and here is the iframe class:

Code: Select all

.iFrame {
    transform: scale(0.20, 0.20); 
    -moz-transform: scale(0.20, 0.20); 
    -webkit-transform: scale(0.20, 0.20); 
    -o-transform: scale(0.20, 0.20);
    -ms-transform: scale(0.20, 0.20);

    transform-origin: top left;
    -moz-transform-origin: top left;
    -webkit-transform-origin: top left;
    -o-transform-origin: top left;
    -ms-transform-origin: top left;
    }

Although option #1 is challenging, I do use it in specific situations. However, I use option #2 most often.