ad fixet element to view (Widget)

It can be done with the js code. Below is the code you can test. It adds the extra loading bar to the container.

JS Custom Section

const plugin = this;
const $ = jQuery;
const $loading = $('<div>').addClass('myloading').text('loading');

plugin.$container.append($loading);

plugin.$container.on('ipanorama:scene-progress', (e, data) => {
   const flag = data.progress.loaded == data.progress.total;
   $loading.toggleClass('active', !flag);
});

CSS Custom Section

.myloading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.myloading.active {
    display: flex;
}

Great, thanks. I will try to insert it.
i have never been working with JS, so I am completely blank at this 🙈.

hmm… i am not getting any thing, after adding the codes. ?

I might not described my needs the right way 🙂 .
Just as there are a: max the view option in the right corner. I would like to have an option in one of the other corners, with an icon of a map, that link to a page, or a marker, instead of having to make a marker on the ground, in each scenes.

I created a sample with the top-right button, if a user click on it he will go to the google.com. Sample – https://imgur.com/a/e8N13OQ

Styles

.mybutton {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    width: 32px;
    height: 32px;
    background: #000;
    text-decoration: none;
}

JS

const plugin = this;
const $ = jQuery;
const $btn = $('<a>').addClass('mybutton').attr({'href':'https://google.com','target':'_blank'});

plugin.$container.append($btn);

• This reply was modified 2 hours, 39 minutes ago by Avirtum.

I’ve been following along with this. This works, my question would be, “I get a black box for the link, (I can change the color though.) how do I add an icon there?” I may have it, would this be correct? Changing the background-image to any icon file?

.mybutton {
display: block;
position: absolute;
top: 5px;
right: 5px;
width: 32px;
height: 32px;
background-image:url(https://kasdorf.name/SMLC/pics/Compass-North-Red-N2.png);
background-size:contain;
text-decoration: none;
}

There is a small issue depending on which widget is used. i.e. In the “List” Widget, the Scene button is already there, so it sits on top of it. It needs to go beside it if possible?

• This reply was modified 2 hours, 27 minutes ago by kaz2.

Never mind, changing the “right: 5px” to “right: 25px” fixed that.

use left: instead of right: :-). or add more px.

I just did it.

Tanhkt, it work great , just what I needed :-).

Just curious… What was the first code for ?

“What was the first code for?” Can you be more specific about what you’re talking about?

this one:

const plugin = this; const $ = jQuery; const $loading = $(‘<div>’).addClass(‘myloading’).text(‘loading’); plugin.$container.append($loading); plugin.$container.on(‘ipanorama:scene-progress’, (e, data) => { const flag = data.progress.loaded == data.progress.total; $loading.toggleClass(‘active’, !flag); });

I see. It’s show the custom message by center when the scene data is loading. It uses ‘ipanorama:scene-progress’ event for this action. This is just an example how to customize a virtual tour a little by code.

okay, thank for your help 🙂