Fit the output of Marzipano in a div with specific size?

[Joost]

Hi,

Just wondering if it is possible to fit marzipano in a specific div that has a maximum width/height? I don't want to use frame to make this happen. Anyone got advise?

thanks in advance,

Joost

[Carlos Eduardo G. Carvalho (Cartola)]

What about <iframe>?

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/f223dddd-2dfa-40ca-ae77-dc72ea2b763fn%40googlegroups.com.

[Carlos Eduardo G. Carvalho (Cartola)]

Here is, for example, the code youtube gives you to embed a video in a frame in your site:

<iframe width="1218" height="685" src="https://www.youtube.com/embed/y9Trdafp83U" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

[Joost]

Hi,

I want to do this with a div, because iframe is deprecated and will not work in future browsers.

Do you guys know if there is a solution with div?

thx,

Joost

Op donderdag 26 november 2020 om 16:24:19 UTC+1 schreef cart...@gmail.com:

[Carlos Eduardo G. Carvalho (Cartola)]

What about object?

<object type="text/html" data="index.html" width="900" height="500"></object>

With <div> I guess you would have to change things in marzipano code.

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/b84a1725-2e67-4604-b565-82e413eb97f0n%40googlegroups.com.

[Carlos Eduardo G. Carvalho (Cartola)]

Other options with ajax, php and javascript if you search the web: https://www.ecosia.org/search?q=can+i+use+div+instead+of+iframe&addon=firefox

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

[olof thiel]

This look terrific Carlos - I have been searching for a way to show the great Marzipano viewer on my site but in a controlled and smaller version!

BUT not being an expert in coding I don´t know where to put this code. Do I put it in the data.js, in the index.html, in the style.css or where else...

And where in that specific page do I then put the code?

Yours

olof thiel

stockholm 

sweden

[Puneet Agarwal]

Do anyone want to buy pano360.com Domain Name.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/47a0dba4-394f-4e54-86f4-f4559af53a6en%40googlegroups.com.

[Carlos Eduardo G. Carvalho (Cartola)]

Hi Olof,

Sorry for taking too much time to answer. If you haven't found the solution yet, I'm gonna try to show you the way.

As you said, you want to show Marzipano inside your own site. The easiest way would be using the "iframe" tag. I have suggested the "object" too, but never used it. The third option, suggested by Joost, was using a "div", which finally maybe would need some change in marzipano code.

But to use "<iframe>" or "<object>" the change would be done in your site code. So you would need to take the page where you want the marzipano tour to be shown (the HTML file of your page), locate the place where you would want the marzipano rectangle and put something like this there:

<iframe width="500" height="300" src="http://your/marzipano/index.html"></iframe>

Is "iframe" really deprecated? You can still find it in tutorials. I bet that it will work in every browser, although I didn't test it. I say that because I think it is still common to see <iframe> used, but this is a total subjective impression.

To try the "<object>" tag I guess it would be something similar, just changing "iframe" with "object".

If your page is online and you tell me where you want it to be placed and the size, maybe I can try to code it. I've tried here at the w3school site with one of my panoramas. My pano is using krpano, but it doesn't matter, the "iframe" will fit any other web page inside a rectangle of other HTML page.

To try there you just need to change the code on the left and click "RUN" button to see the result.

Bests,

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/47a0dba4-394f-4e54-86f4-f4559af53a6en%40googlegroups.com.

[Carlos Eduardo G. Carvalho (Cartola)]

Hi again,

Well, I've tried to do the change in Marzipano code trying not to use "iframe" or "object", but I still think "iframe" is the best option. Surely it is the easiest. I'll explain the little I've done. I have given up after that, seeing that there are many complications implied in doing the thing this way, so don't get happy.

To do the job by inserting the panorama "<div>" inside your page there would be necessary to mix marzipano code with your site code, reducing the panorama "<div>" to a rectangle inside the page. Without "iframe" or "object" it is not possible to keep the marzipano code completely isolated and being called by its first HTML. So first it would be necessary to insert every call to javascript or CSS marzipano does in its index.html on your own page. Lines like:

<link rel="stylesheet" href="vendor/reset.min.css">
<link rel="stylesheet" href="style.css">

And also those at the end:

<script src="vendor/es5-shim.js"></script>
<script src="vendor/eventShim.js"></script>
<script src="vendor/classList.js"></script>
<script src="vendor/requestAnimationFrame.js" ></script>
<script src="vendor/screenfull.min.js" ></script>
<script src="vendor/bowser.min.js" ></script>
<script src="vendor/marzipano.js" ></script>

<script src="data.js"></script>
<script src="index.js"></script>

Then you need to take the Marzipano index.html and edit the "<div id="pano"></div>" line, so it stay only with "<div id="pano">", so you then put the removed "</div>" below the last "</script>" found (that one I've listed above).

After doing this, the division id=pano embraces all panorama elements, so their absolute sizes and positions will be relative to the pano div and you can change only it. So, at the style.css you can start doing other things.

If you change the:

#pano {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

below, the changed lines:

  top: 200px;
  left: 300px;
  width: 700px;
  height: 400px;

Then we can notice that all elements of the panorama rectangle (controls, title bar, full screen button, etc) will vanish, because they stay below the panorama itself. So we would need to put the panorama to a lower Z level or increase other element levels. I did this by using "z-index: 1;" in each element. Then I've tried to make a common page so the panorama would be inserted on it. Another problem rises: the CSS code of Marzipano changes many elements. A common header "<h1>" wouldn't be big or have black font. Here is the page status when I've given up:

The "Marzipano framed test" is a "header 1" element, but is with the same font size as the following text. All text is white, which I didn't wish. It all shows that the pages are mixed up, the marzipano CSS code influences the page code and vice versa. To do the thing well done it would be necessary to guarantee IDs, classes and styles names distinct between your page and marzipano, so each style configuration don't change the other one.

Well, I won't continue with the job... I would use "iframe" and be happy :)

Bests,

Carlos E G Carvalho (Cartola)
http://cartola.org/360
http://www.panoforum.com.br/

Em dom., 9 de mai. de 2021 às 06:57, olof thiel <pos...@olofthiel.se> escreveu:

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/47a0dba4-394f-4e54-86f4-f4559af53a6en%40googlegroups.com.

[olof thiel]

"If your page is online and you tell me where you want it to be placed and the size, maybe I can try to code it. I've tried here at the w3school site with one of my panoramas. My pano is using krpano, but it doesn't matter, the "iframe" will fit any other web page inside a rectangle of other HTML page.”

   Hi Carlos,

I am so glad you answered at last - and - I would be SO VERY HAPPY if you could fix this for me!

I have put together the site bit by bit for over 20 years and without any formal training in coding.

I decided from the beginning that I wanted to have a site where the top part with all the adresses always should be seen whatever happened so the viewer could have full control and return to the beginning ...

So I was recommended to use coding in "DIV" and that is what I use and what I want (if possible…)

I  hereby send you:

1/ the link to my site http://www.olofthiel.se/index.html 

2/ the special section with the 360° marzipano code http://www.olofthiel.se/specialD.html 

3/ and at last that parts code http://www.olofthiel.se/bildmatr/special/MRpanoramaNYTT/app-files/index.html 

How about 970 wide and 730 high - just put it up on top and to the left, I would be able to change the position later...

PS the only thing I  need xtra is a button for full view...

/ olof 😀

22 maj 2021 kl. 18:25 skrev Carlos Eduardo G. Carvalho (Cartola) <cart...@gmail.com>:

Hi Olof,

Sorry for taking too much time to answer. If you haven't found the solution yet, I'm gonna try to show you the way.

As you said, you want to show Marzipano inside your own site. The easiest way would be using the "iframe" tag. I have suggested the "object" too, but never used it. The third option, suggested by Joost, was using a "div", which finally maybe would need some change in marzipano code.

But to use "<iframe>" or "<object>" the change would be done in your site code. So you would need to take the page where you want the marzipano tour to be shown (the HTML file of your page), locate the place where you would want the marzipano rectangle and put something like this there:

<iframe width="500" height="300" src="http://your/marzipano/index.html"></iframe>

Is "iframe" really deprecated? You can still find it in tutorials. I bet that it will work in every browser, although I didn't test it. I say that because I think it is still common to see <iframe> used, but this is a total subjective impression.

To try the "<object>" tag I guess it would be something similar, just changing "iframe" with "object".

If your page is online and you tell me where you want it to be placed and the size, maybe I can try to code it. I've tried here at the w3school site with one of my panoramas. My pano is using krpano, but it doesn't matter, the "iframe" will fit any other web page inside a rectangle of other HTML page.

You received this message because you are subscribed to a topic in the Google Groups "marzipano" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/marzipano/TfzIgAPQGBw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/CALW1f7iLernu_vzBYS-%3D0hYidng_ZiFGtOrrwDpLKRHgE8vwgg%40mail.gmail.com.