You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Sunday, August 28th 2022, 6:58am

Showpano and Popup feature

I noticed in the maps2 example, the pano can open in a modal window by the showpano code. Comparing that with the Popup.xml code they seem quite similar but in my view the showpano is a better choice ;
the pano to be opened doesn't need an html file
the size of the modal window can be set a percentage of the browser screen
the lines of code is shorter.
The thing that is missing for showpano is a close button (X) which the popup actually has in option.

If you could add the close button to the showpano code that would be very helpful.
Or the other way round, if these 2 first features mentioned above could be added to the popup.xml as an improvement, that would make it much better.

This post has been edited 1 times, last edit by "Islander" (Aug 29th 2022, 2:32pm)


Tuur

Sage

Posts: 3,831

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

2

Tuesday, August 30th 2022, 11:37am

Hi,

here a simple example for a close button.
I used a red textfield ball, but that can be a png or svg of course...

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
58
59
60
61
62
63
	<action name="showpano" type="Javascript"><![CDATA[

        // showpano(xml, url) - a load a xml
        // showpano(panotype, url) - a load a pano image
        var panotype = args[1];
        var url = args[2];

        var bg = krpano.addlayer();

        bg.type = "container";
        bg.width = "100%";
        bg.height = "100%";
        bg.safearea = false;
        bg.bgalpha = 0.3;
        bg.bgcapture = true;
        bg.handcursor = false;
        bg.zorder = 1;
        bg.alpha = 0;
        bg.onloaded = "tween(alpha,1);" 
        bg.onclick = "set(enabled,false); tween(alpha,0.0,0.5,default,removelayer("+bg.name+",true));";

        var l = krpano.addlayer();
        l.type = "krpano";
        l.width = "80%";
        l.height = "80%";
        l.align = "center";
        l.bgroundedge = 17;
        l.maskchildren = true;
        l.bgcolor = 0;
        l.bgalpha = 0.5;
        l.bgshadow = "0 0 20 0 1.0";
        l.parent = bg.getfullpath();
        l.onloaded = function()
        {
            if (panotype == "xml")
            {
                l.krpano.actions.loadpano(url);
            }
            else
            {
                l.krpano.image.reset();
                l.krpano.image[panotype] = {url:url};
                l.krpano.actions.loadpanoimage();
            }
        }

        var sw = krpano.get("stagewidth");
        var sh = krpano.get("stageheight");

        var c = krpano.addlayer();
        c.type = "text";
        c.width = "24";
        c.height = "24";
        c.x = sw /10 - 12;
        c.y = sh /10 - 12;
        c.align = "righttop";
        c.bgroundedge = 12;
        c.bgcolor = 0xff0000;
        c.bgalpha = 1;
        c.parent = bg.getfullpath();
        c.onclick = function(){ krpano.call("set(layer["+bg.name+"].enabled, false);tween(layer["+bg.name+"].alpha,0.0,0.5,default,removelayer("+bg.name+",true));"); }

	]]></action>


Hope it helps,

Tuur *thumbsup*

3

Tuesday, August 30th 2022, 7:35pm

Hi Tuur,

You just made it better! Thank you friend. *thumbsup*
Do you have any idea of how to blur the background on loading the modal window?

This post has been edited 1 times, last edit by "Islander" (Aug 30th 2022, 7:56pm)


Tuur

Sage

Posts: 3,831

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

4

Wednesday, August 31st 2022, 4:09pm

Yes,

Use the pp_blur plugin
..
edit: or Zfilter *thumbup*

Tuur *thumbsup*

This post has been edited 1 times, last edit by "Tuur" (Aug 31st 2022, 11:30pm)