Garden Gnome Software

Hi.

I would like to know if (and if how) it is possible to use the external loader to load a html-page into a gallery-component inside a panorama. The idea is to use it for loading detailed information about products which are placed inside a panorama. The external webpage could then be updated as required without adjusting the panorama-file each time.

Is there a way to do so?

Thank you. Tim

Hi Tim,
You need to use a text box to display an HTML page.
You need to use an iframe in the text box.
Example: The above code is assuming the text box would be 800 x 600px.
Of course the gallery uses the external loader for images and you would need to replace this with text box.
This means you need to use an iframe to load images as well as the HTML page.
Regards,
Hopki

hi,
i have tried this, it works fine, but you can not scroll on mobile devices like an iphone 4,5,6,7.
why?
i tried also with supplementary this. scrolling="yes" (<iframe src="http://ggnome.html" width="800px" height="600px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" scrolling="yes"></iframe>)
is there a way to solve this?
thx. mphoto

Hi mphoto,
This is a restriction of iOS, I know Thomas will be looking into this later and don't know if we can do anything with it until Thomas has a look.
Regards,
Hopki

Hi Hopki,

Any news on this one?
I am having the exact same issue...and it needs a rather urgent solution.

Kind regards,
Stefan

Hi Stefan,
It looks like iOS will not allow this.
We have this listed and will keep an eye on iOS to see if the situation changes in the future.
The only thing you can do is use an Is Mobile logic block and two hotspot images, one to open in iFrame and Is Mobile to open a new window.
So the actions will be in the hotspot images and not the template.
Regards,
Hopki

Hi,

I've found some code and built a quick demo of a scrolling iFrame in a text box that seems to work for me on the iPad Air. It's not optimised for the iPhone and it's a bit big for the screen but you can still scroll it though. Comes up with a double scrollbar on desktop so I'm not sure what's going on there.

Quick Update: I've made the iframe smaller so it fits within an iPhone 6 screen and I've used a logic block to open two different html pages in the iFrame based on the 'isMobile' target. This resolves the double scroll bar on the desktop version.

Take a look and if it's what you are after I'll polish it a bit and post the code.

https://rebrand.ly/scrolling

cheers,

Tony

Hi Tony,

Just tested this on iPhone 5 and it works! This looks like a solution for my problem so can you please post the code and some description of the config in Pano2VR?

Kind regards,
Stefan

Hi Tony,

I was looking at your example and noticed that you are loading an iframe inside an iframe.

This CSS on the parent div does the trick, right?

.scroll-wrapper {
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;

/* important: dimensions or positioning here! */
}

.scroll-wrapper iframe {
height: 100%;
width: 100%;
}

Regards,
Stefan

Hi Stefan,

Yes that's the .css code that allows the scroll. In the example it's in the index.html page but you will probably have a .css file for your frame content so it can go in there. In the html page that you load the iFrame is inside a div with the code One issue is that using the .css code adds an additional scroll bar when viewed on the desktop. I've tried a number of variations of the .css but can't get around it. So the only way I found to resolve it was using a logic block, the isMobile target and two html pages. One html page has the class the other doesn't.

In the logic block there isn't a default value only two targets isMobile=true and isMobile=false.



I'll write up a tutorial for my website later today.

cheers,

Tony

Hi,

I tried to get rid of the double scrolling bars on the desktop without having to use the logic block and 'isMobile' trigger but to no avail. If I got rid of the double scroll then the iOS version wouldn't scroll.

On the latest version I've gone back to the original post by Tim asking to load the external HTML page into the Gallery component and have it scroll on iOS.

Check out https://rebrand.ly/gt3

Tony

Hi Tony,

Thanks for the update.
I use separate menu's for desktop and mobile so easy for me to implement.
So, I created an additional html wrapper page that is called from pano2vr and in turn calls the actual iframe. I do it this way because we created some functionality for the customer to allow him to update the content himself.
Only thing that doesn't seem to work is the reservation widget, which is also called in an iframe. So i need to investigate a bit more.
Check https://holodeck.graphics/tours/de_soetekoeke/

Thanks a lot for your support!

Regards,
Stefan

Hi Stefan,

Nice job on the tour, the restaurant and the food shots look great.

I've implemented my example the same way with a wrapper html page calling the content html.

I see what you mean about the reservation widget looks like a bit of tricky code going on there. Let me know if you resolve the issue.

cheers,

Tony

Hi Tony,

Quick update, just to let you know that I ended up running the reservation widget in a separate webpage.

Regards,
Stefan

Just curious as to why this code can't just be added to a normal Hotspot URL vs having to add it to a gallery component?