feather box - image hotspot

Q&A about the latest versions
Post Reply
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

Hi all,

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

Best regards,
Oliver
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

Hi Tony,

thank you for your help, your solution worked and I will try to find out why :roll: 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
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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. :roll:

Any suggestions?

Thank you in advance,
Oliver
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

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

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

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
Last edited by Tony on Thu Dec 14, 2023 12:54 pm, edited 1 time in total.
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

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
User avatar
Tony
Posts: 1340
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

What mobile device are you using?

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

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
volvoxturbo
Posts: 15
Joined: Mon Oct 30, 2023 10:36 pm
Location: Germany, Spain
Contact:

Hi Tony,

I can test it on my Samsung 20+.

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

Cheers,
Oliver
Post Reply