feather box - image hotspot

[volvoxturbo]

Hello,
first of all I would like to let you know that I'm new into Pano2vr, so please excuse boring questions from an absolute beginner.

In my tour I'm using the feather box skin with its image hotspots and everything works like a charme. If I click on the hotspot the thumbnail shows up and with another click on it, the large version of the image comes out.

But I would like to skip the thumbnail. What do i have to do?
In the tree is the container ht_image_popup_fs and the ht_image hotspot which are related as I understand it.

I would be very grateful for your help

Thank you and best regards,
Oliver

[volvoxturbo]

Hi all,

did I express myself unclear or why am I not getting an answer here?

Best regards,
Oliver

[Tony]

Hi Oliver,

did I express myself unclear or why am I not getting an answer here?

No you made yourself quite clear however a little patience goes a long way

Quick fix, cut or copy all of the Actions from the element ht_image > ht_image_bg > ht_image_thumbnail

Paste the copied Action into the Actions of the element ht_image > ht_image_bg > ht_image_toggle_container

Try it, it worked for me.

Tony

[volvoxturbo]

Hi Tony,

thank you for your help, your solution worked and I will try to find out why and sorry for my impatience but I am so curious about how things are working and there is sooo much to learn in this software.

Best regards,
Oliver

[volvoxturbo]

Hi all,

how can I make it work for a mobile device?
If I click on an image hotspot on my mobile, two actions are starting. The one with the X overlays the other one which works on desktop.

Any suggestions?

Thank you in advance,
Oliver

[Tony]

Hi,

Are you using the project I uploaded or a different one. The one I uploaded hasn't been optimised for mobile.

Tony

[volvoxturbo]

Hi Tony,

I'm using yours.
I helped myself by deleting the two actions with target: vis_phone_image and image_popup_phone in the ht_image_icon_container, but I guess that there is certainly a more elegant solution, no?

Best regards,
Oliver

[Tony]

The prebuilt skins from Pano2VR contain some quite sophisticated element construction to provide multiple options for viewing within one element.

In your case it would be much simpler just to create a new Hotspot Template that delivers the actions that you want on desktop and mobile. I'll take a look tomorrow and create on that you can add to the skin.

Tony

[volvoxturbo]

Hi Tony,

I'm back from the funeral of my mother-in-law.
It would be great, if you could reupload your file again.

Thank you and best regards,
Oliver

[Tony]

Hi Oliver,

Sorry to hear about your mother-in-law, my condolences.

I've been working on the skin, it's quite complex and has taken some time. It's not quite finished yet some issues on mobile landscape to resolve.

Here's what I've got. In the skin there is a Title "The Glass Jungle - Yangon" and 3 Point Hotspots, "The Glass Jungle", "Myanmar" and "Tony Redhead Website".

The Actions of each element are:

Title: click on the title and the page elements are hidden, the background is tinted, an iframe containing the Myanmar Tour, set to a custom node opens and is interactive and a "close button" appears in the top right corner. Clicking the close button or the tinted area returns you to the original state of the tour.

The Glass Jungle: This is the standard image popup for the Feather Box skin. Clicking on the Point Hotspot opens a small popup window, showing an image on a tinted background and a close button in the top right of the popup window. All other elements in the skin are visible and the underlying panorama can be interacted with.

Clicking on the image the background is tinted, a larger version of the image is displayed, a title "The Glass Jungle" is displayed. Clicking on the image, title or tinted background will return you to the small poupup window state where clicking on the close button will return you to the original state of the tour.

Myanmar: This is the modified image popup for the Feather Box skin. Clicking on the Point Hotspot opens a large popup window, showing a large image bypassing the standard image small popup window, a title "Myanmar" is displayed and the background is tinted. Clicking the title, image or tinted background will return you to the original state of the tour.

Tony Redhead: This is the modified image popup for the Feather Box skin with external loading. Clicking on the Point Hotspot opens a large popup window, showing a large image bypassing the standard image small popup window, a title "Tony Redhead Website ->" is displayed and the background is tinted. Clicking the image or tinted background will return you to the original state of the tour however mouseover the title and it changes to "Visit Now" clicking the title will open an iframe containing my website and a "close button" appears in the top right corner. Clicking the close button or the tinted area returns you to the second state with a large image. Clicking the image or tinted background will return you to the original state of the tour.

Here is the tour in action:

https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Let me know what you think.

Regards,

Tony

[volvoxturbo]

Hi Tony,

thank you for your condolences.

Your solution is really helpfull. But The Glass Jungle hotspot in my opinion would be better if the thumpnail appeared by hovering, not by clicking, which only makes sense on a desktop.
On a mobile device this works well while the images resp. your website of the 2 other hotspots are too small :-/

What do you think?

Best regards,
Oliver

[Tony]

Hi Oliver,

The Glass Jungle hotspot in my opinion would be better if the thumpnail appeared by hovering, not by clicking

Not quite sure why you would want to do this but the "Glass Jungle Hotspot" is the default one in the Feather Box skin and it would be easier to build a different hotspot that would work with a Mouse Enter or Mouse Over Trigger.

On a mobile device this works well while the images resp. your website of the 2 other hotspots are too small :-/

Once again these hotspots are using the basic elements of the ht_image Feather Box skin element. The external image element actually has a Width of 80% and a height of calc(80% - 30px) and the Content Scaling "min" so if you turn the background on you can see the relationship between the external image element and the image.

external image element.jpg

In this case you would have to provide an alternate image for mobile devices.

alt image.jpg

Here's an updated version with alt images for mobile portrait aspect. (updated link)

https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Tony

[volvoxturbo]

Hi Tony,

many thanks for your explanation. So it seems to be more complicated than I thought :-/
Never mind, I'll work my way through it.

I also noticed that the panorama on my mobile device is larger than the screen, so I have to scroll. The controls are also too big. Is there a solution for this?

I use the following iframe for embedding:

<iframe src="https://generationen.org/vr_rundgang/malkastenpark/" name="Generations in the paintbox" width="100%" height="720" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" style="float:left; margin-left:0px" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>

Best regards,
Oliver

[Tony]

What mobile device are you using?

Do you have a link to the website where the tour is embedded?

Tony

[volvoxturbo]

Hi Tony,

I can test it on my Samsung 20+.

The link to the tours is: https://generationen.org/vr-rundgang/

Cheers,
Oliver