Closing popups - add X close mark??? + background issues - krpano Panorama Viewer

Closing popups - add X close mark??? + background issues

Trainee

Wednesday, May 6th 2020, 9:47am

Closing popups - add X close mark??? + background issues

Hi guys
In this example:
https://krpano.com/releases/1.20.6/viewe…tml5=only+webgl
Each hotspot results in a popup window of sorts. For the average user, it's not obvious that you should click off the popup to close it. This can also be very problematic if you have many hotspots and when you try click off a popup, you may click on another hotspot in the background and then the popup doesnt close.
How can I add a typical X close button for the popup, which are typically found on things like lightboxes?
Alternatively, is there a free lightbox somewhere that will give me all the functions of this example:
https://krpano.com/releases/1.20.6/viewe…tml5=only+webgl
....but also additionally add the little X close button (and maybe even with a gallery function also)

Go to the top of the page

Morne

Trainee

Posts: 63

Thursday, May 7th 2020, 8:28am

No ideas?

Go to the top of the page

klaus.krpano

Administrator

Posts: 13,499

Thursday, May 7th 2020, 9:59am

Hi,

here the same example slightly modded with a close-x icon - replace the current 'popup' action with that part and add a custom 'closex.png' icon into the same folder:

Source code

<action name="popup" scope="private:POPUP" args="type, content, width, height, scrollbars"><![CDATA[
    if(popup, break(); );
    addlayer('popup', popup);
    set(popup,
        type=container,
        width=calc(min(width,global.stagewidth*0.9)),
        height=calc(min(height,global.stageheight*0.8)),
        align=center,
        bgborder='1 0x555555 1',
        bgcolor=0x555555,
        bgalpha=0.7,
        bgshadow='0 10 20 0x000000 0.5',
        bgcapture=true,
        maskchildren=false,
        capture=true,
        handcursor=false,
        alpha=0
    );
    
    addlayer('popup_close_x', closex);
    set(closex,
        url='%CURRENTXML%/closex.png',
        parent='popup',
        align=righttop,
        edge=center,
        scale=0.5,
        zorder=99,
        alpha=0.25,
        onover='tween(alpha,1)',
        onout='tween(alpha,0.25)',
        ondown='tween(alpha,1)',
        onup='tween(alpha,0.25)',
        onclick='popup_close()'
    );

    if(type == 'html',
        copy(popup.datacontent, content);
        calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

      ,type == 'iframe',
        calc(popup.datacontent, '<iframe style="position:absolute;width:100%;height:100%;top:0px;left:0px;" src="'+content+'" frameborder="0" allowfullscreen></iframe>');
        calc(popup.onloaded, 'add_html_code(get(datacontent),'+scrollbars+');');

      ,type == 'image',
        set(popup,
            bgcolor=0xFFFFFF,
            bgalpha=1,
        );
        addlayer("popup_image", img);
        set(img,
            url=get(content),
            align=center,
            width=-20, height=-20,
            parent=get(popup.name),
            onloaded='popup_imageloaded()'
        );
    );

    tween(global.plugin[pp_blur].range, 40.0);
    delayedcall(0.2, tween(global.layer[popup].alpha, 1.0); );

    set(global.events[popup].onclick, popup_close() );
]]></action>

<action name="popup_close">
    set(global.events[popup].name, null);
    tween(global.plugin[pp_blur].range, 0.0);
    tween(global.layer[popup].alpha, 0.0, 0.25, default,
        removelayer('popup', true);
        scope(private:POPUP, delete(popup); );
    );
</action>