surfeatuvida

Hello, this way is working but I can only use it for the current year and I need this condition for every year from now on.

How can I configure it to work for every year? (2022, 2023, 2024, …)

Will you fix the period filter?

Thanks

Sure, I will upload as you suggest.

https://snipboard.io/aeJspv.jpg

https://snipboard.io/qEFakM.jpg

Please, help me with this issue as I need to fix it as soon as possible.

Thanks

Hi, could you check this issue or you can tell me what can happen with the date visibility conditions?

I need to fix it as soon as possible.

If you need to check the website just tell me.

Thanks

Hello, I don’t use any cache plugin.

The only condition I use is the date period one.

You can check how I configured it:

Configuration 1

Configuration 2

It worked for a year and then stopped working.

Hello,
I understand but the problem is still happening without any custom code.

If the on-hover or on-click div (window) is higher than the 360 image, it gets under the rest of the content so you can’t see it properly.

Is there any way to make this div visible over the viewport content and not cut it from the top of the 360 image?

You can see it here: on-hover Div under content

This div must be over the image and the viewport content and it cuts in the top of the 360 image.

It isn’t custom code, is just an <h2>

I think this is an important issue.

I’ll wait for your reply.
Thanks

Hello @jahirchowdhury, did you check this second issue with your team as you told me?

I wait for your answer,

Regards,

No worries.

I will wait for your reply tomorrow.

Thanks!

This would be great for the first issue I told you, thanks for it.

What about the second issue? (The one I think it’s more important)

The one when the hover window/modal is higher than the div of the panorama image, it only shows the part inside this panorama’s div.

If is there more content and this hover modal is higher, I can’t set z-index to show it over the website outside this panorama div so I can’t see all the hover content.

I’ll wait for your reply,

Thanks

Thanks for your reply.

The main problem is the one exceeding the tour height and not being able to set over it.

The other one, I can use only the on-hover, it’s no problem.

Sure, I can give you the code I used:

HTML:

<div class=”hotspot”>
<div class=”container”>
<div class=”card”>
<div class=”box”>
<div class=”content”>
<h2>CINE</h2>
<h3>Película: Las aventuras de los Minions</h3>
<p>Haz click para ver la película o entra aquí para ver el resto de la cartelera</p>
QUIERO VERLO
</div>
</div>
</div>
</div>

CSS:

/**************************
* HOTSPOTS EN IMAGEN 360
* ************************/
.hotspot {
font-family: “Poppins”;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
min-height: 10vh;
background: #232427;
}

.hotspot .elementor video {
height:315px;
}

.hotspot .container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
max-width: 1200px;
margin: 0px 0;
}

.hotspot .container .card {
position: initial;
min-width: 640px;
height: 300px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
inset -5px -5px 15px rgba(255, 255, 255, 0.1),
5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 15px rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin: 0px;
}

.hotspot .container .card:nth-child(1) .box .content a.hotspot-button {
background: #0CF5FD;
font-weight:600;
}

.hotspot .container .card:nth-child(1) .box .content a {
color: #0CF5FD;
}

.hotspot .container .card:nth-child(1) .box .content a:hover {
color: #0bccd2;
}

.hotspot .container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #2a2b2f;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.hotspot .container .card .box .content {
padding: 20px;
text-align: center;
}

.hotspot .container .card .box .content img {
display: block;
margin: 0 auto;
width: 200px !important;
height: auto;
}

.hotspot .container .card .box .content h2 {
position: absolute;
top: -40px;
right: 30px;
font-size: 8rem;
color: rgba(255, 255, 255, 0.1);
}

.hotspot .container .card .box .content h3 {
font-size: 2.5rem;
color: #fff;
z-index: 1;
margin-bottom: 15px;
}

.hotspot .container .card .box .content p {
font-size: 1rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.9);
z-index: 1;
}

.hotspot .container .card .box .content a.hotspot-button {
position: relative;
display: inline-block;
padding: 8px 20px;
background: black;
border-radius: 5px;
text-decoration: none;
color: white;
margin-top: 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.hotspot .container .card .box .content a.hotspot-button:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
background: #0bccd2;
color: #fff;
}

I made another test with an HTML without using styles (only an <h2>) and the same thing keeps happening.

I hope you could find a solution because is a blocking problem for user experience.

Waiting for your reply,

Thanks!

Another problem I have is that when the hover window/modal is higher than the div of the panorama image, it only shows me the part inside this panorama’s div.

If is there more content and this hover modal is higher, I can’t set z-index to show it over the website outsite this panorama div so I can’t see all the hover content.

Can you also help me with this issue?

Thanks

Sorry I could manage to fix it.
It was not because of your plugin.

Thanks for your reply

It worked well.

Thanks for your help @baljitdhanjal

I’m sorry, I disabled the maintenance mode, please try again.
Thanks

This is the website page where I use your plugin: https://ireneholistica.com/programa-sanando-tu-esencia/

As you can see at the first section, I tried to change the default’s Amazon icon for a new SVG icon (a number 1) and it is missplaced (not in the circle) and it has a huge size.

Thanks for your help.

This is also happening to me. Is there any solution?