Layer 100% with "margin"

MrSoul · August 26, 2024 at 1:21 PM

Hello,

There's something I didn't quite understand about the positioning of the layers.

Basically, I'd like to have a container layer that takes up 100% of the safezone (or at least the viewport), minus a margin (say 30px top, right, left, and for the bottom, the size of the controlbar + 30px).

I've tried a width="calc:100%-60px", but the 100% isn't taken into account.

Are there any variables that could help me?

klaus.krpano · August 26, 2024 at 1:55 PM Official Post

Just use: width="-60"

That’s 100%-60px

See here the note about negative values:

krpano.com - Documentation - XML Reference

Alternatively it would be also possible to use the childmargin settting on a parent layer:

krpano.com - Documentation - XML Reference

MrSoul · August 29, 2024 at 5:42 PM

Thank you very much Klaus, this has enabled me to make the little lightbox I needed.

I do have one small problem though.

With my code, if I want to display a horizontal image on mobile, it goes outside the margins defined in the boxbg layer.

How can I ensure that the image in the boximg layer is displayed at 100% of both axes of the parent (boxbg), without the margins and while maintaining its aspect ratio?

Last little question, is there anything else I need to optimise in my code?

XML

	<!-- Lightbox -->
	<layer 
		name="boxbg"
		type="container"
		visible="false" 
		width="100%"
		height="100%"
		keep="true" 
		bgcolor="0x000000"
		bgalpha="0.0"
		bgblur="0"
		childmargin="30 30 120 30"
	>
			<layer 
				name="boximg" 
				type="image"
				url=""
				align="center" 
				height="100%" 
				width="prop" 
				alpha="0"
				onclick="close_lightbox();" 
			/>		
	</layer>

	<action name="open_lightbox">
		set(layer[boxbg].visible, true);
		set(layer[boximg].url, get(layer[boximg].img_url));
		tween(layer[boxbg].bgalpha, 0.6, 0.3);
		tween(layer[boxbg].bgblur, 6, 0.3);
		tween(layer[boximg].alpha, 1, 0.3);
	</action>
	<action name="close_lightbox">
		tween(layer[boxbg].bgalpha, 0, 0.3);
		tween(layer[boxbg].bgblur, 0, 0.3);
		tween(layer[boximg].alpha, 0, 0.3);
		delayedcall(0.3, set(layer[boxbg].visible, false));
	</action>
	<!-- // Lightbox -->
	
	<hotspot name="Passage2" style="skin_imagestyle" ath="162.86727970606879" atv="0.06846212802646162" title="Perrine Labussière - Passage 2" distorted="false" onclick="set(layer[boximg].img_url, '../photos/20240317164800_5234.jpg'); open_lightbox();" />

Display More

Thank you

Layer 100% with "margin"

Participate now!

Similar Threads

[solved] Is it possible for html layer to contain ALL the functionality of a WEB page?

[solved] How to Connect Krpano with Bootstrap

Unable to show popup on clicking the hotspot

How to hide scrolling textfield on pano load