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

Morne

Hi guys
In this example:
https://krpano.com/releases/1.20.…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.…tml5=only+webgl
....but also additionally add the little X close button (and maybe even with a gallery function also)

Morne

No ideas?

klaus.krpano

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:

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>

Alles anzeigen

Best regards,
Klaus

Morne

Awesome, thanks Klaus!

Morne

Sorted for now, thanks

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

Jetzt mitmachen!

Benutzer online in diesem Thema