Super, thank you both, you're top notch, it answered all my questions :)
I'll show you the finished result: https://vr.remy-photographie.com/tours/galerie-du-presbytere/
PS: I'm not a fan of the new syntax (even though I've used it), I find it detracts from the readability of the code, especially when multiplication is used: calc(*var * *var2);
Great, I used the first solution.
However, it only seems to work with a get() (I'm having trouble understanding which variable you can call with or without a get()).
And I've just found for the parameters in skin_settings :
However, I have just one small question about this: if I want to retrieve several variables in the same XML parameter, it doesn't work any more:
To fill in childmargin="30 30 120", childmargin="get:skin_settings.design_margin get:skin_settings.design_margin get:skin_settings.design_marginbottom" doesn't work, any idea how?
to get the displayed pixel size of the parent use layer[boxbg].pixelwidth/height
to get the pixel size of the image use layer[boximg].imagewidth/height (after layer[boximg].loaded=true)
in layer[boximg].resize set the images width/height to be contained in the parents pixelwidth/height
Thank you, that was very helpful!
I've decided to compare the aspect ratio of the viewport without the margins to the aspect ratio of the image so that it works regardless of the size of the image/viewport:
<!-- 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"
scalechildren="true"
onresize="resize_lightbox()"
>
<layer
name="boximg"
type="image"
url=""
align="center"
height=""
width=""
alpha="0"
onclick="close_lightbox();"
onloaded="resize_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>
<action name="resize_lightbox">
set(margin, 30);
set(marginbottom, 120);
set(availablewidth, calc(layer[boxbg].pixelwidth - margin - margin));
set(availableheight, calc(layer[boxbg].pixelheight - margin - marginbottom));
set(imgwidth, calc(layer[boximg].imagewidth));
set(imgheight, calc(layer[boximg].imageheight));
set(aspectratiovp, calc(availablewidth / availableheight));
set(aspectratioimg, calc(imgwidth / imgheight));
if( (imgwidth LT availablewidth) AND (imgheight LT availableheight),
set(layer[boximg].width, null );
set(layer[boximg].height, null );
,
if( aspectratiovp GT aspectratioimg,
set(imgresizedwidth, calc(round(availableheight * aspectratioimg)));
set(layer[boximg].height, get(availableheight) );
set(layer[boximg].width, get(imgresizedwidth) );
,
set(aspectratioimg, calc(imgheight / imgwidth));
set(imgresizedheight, calc(round(availablewidth * aspectratioimg)));
set(layer[boximg].width, get(availablewidth) );
set(layer[boximg].height, get(imgresizedheight) );
);
);
</action>
<!-- // Lightbox -->So I've got two little questions to improve things and make the code cleaner:
- Can we add general variables like those found in the skin_settings parameters?
- Could we have something like this on the hotspots :
<hotspot [...] imgurl="../photos/20230815144033_4711.jpg" onclick="open_lightbox();" />rather than :
<hotspot [...] onclick="set(layer[boximg].img_url, '../photos/20230815144033_4711.jpg'); open_lightbox();" />And how do you set it up? (retrieve the imgurl parameter in the action to reuse it)
PS: Sorry, I have a lot of trouble with the doc, English is not my natural language, I'd even say I'm rubbish at it and this one is "exhaustive"!
I've added an action that sets ‘prop’ to width for horizontal screens (desktop) and to height for vertical screens (mobile). It also updates it if the screen size changes.
It doesn't fix the problem, but it makes it less obvious, so if you have any ideas, I'd love to hear them.
PS: what would be the best method of getting the size of the image I want to open?
PS2: Wouldn't it be easier to use an iframe? But then, how do you send the image url from KrPano to the iframe? (to have just one html+js, or php page)
<!-- 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"
scalechildren="true"
flowchildren="true"
onresize="resize_lightbox"
>
<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);
resize_lightbox();
</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>
<action name="resize_lightbox">
if(stagewidth LT stageheight,
set(layer[boximg].width, 100%);
set(layer[boximg].height, prop);
,
set(layer[boximg].width, prop);
set(layer[boximg].height, 100%);
);
</action>
<!-- // Lightbox -->Hello,
I'm having a problem with the "prop" value, which is causing a bug in my Lightbox.
This lightbox is built with a container layer to add margin and darken the background, and inside, a layer that contains the image.
I'd like this image to be displayed at a maximum of 100% of the parent at its largest width, while respecting its aspect ratio.
First of all, the maxwidth and maxheight parameters don't work with percentages, which doesn't suit me (if the image is smaller than its context, then it's zoomed in, which I don't want).
But I especially have a problem with "prop"from what I've tested:
As a result, in my example, if I want to display a horizontal image on a vertical screen, the image is taken out of the screen, and if I invert height and width, then it would be the vertical images that would be taken out of the display on a horizontal screen.
In short, what I'd like is the equivalent of the "object-fit: contain;" function in css:
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}Do you have any ideas on how to get round this problem?
Here's my code:
<!-- 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"
scalechildren="true"
>
<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="test" style="skin_imagestyle" ath="-83.05398201806679" atv="10.8840575489464825" title="test" distorted="false" onclick="set(layer[boximg].img_url, 'test.png'); open_lightbox();" />Thank you
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?
<!-- 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();" />Thank you
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?
Hello everyone,
For several years now, various optimisation guidelines have been recommending the use of the WebP (and AV1 / AV2) format for web projects.
WebP is a modern, open image format developed by Google that is 25-35% smaller than JPEG.
What's more, this format can be considered mature, with a 96% compatibility rate.
Using this format has a number of advantages:
And as a corollary :
It's about time we were able to integrate it into KrPano 
PS: There is also the AVIF format, which is more recent and more impressive in many respects, but for the moment it is much less widely adopted, with a 92% compatibility rate. But it's worth keeping a close eye on, especially in version 2 (AV2), as it could well replace WebP in the years to come.
Hello,
I am in the process of recreating my Google API keys, however, I have a small question.
I would like to restrict my key, only for the necessary APIs.
The choice is wide:
I would say that the Google Map module needs :
Am I right?
Thanks in advance.