Load external webpage into gallery-component

Q&A about the latest versions
User avatar
AVBuild
Posts: 1
Joined: Mon Jan 09, 2017 10:53 am
Location: Germany
Contact:

Thu Jan 26, 2017 9:40 am

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
User avatar
Hopki
Gnome
Posts: 10853
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Feb 05, 2017 5:56 pm

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:

Code: Select all

<iframe src="http://ggnome.html" width="800px" height="600px" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" ></iframe>
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
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
mphoto
Posts: 18
Joined: Thu Sep 01, 2016 3:47 pm

Wed Mar 15, 2017 4:17 pm

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
User avatar
Hopki
Gnome
Posts: 10853
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Mar 19, 2017 8:31 pm

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
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Sat Jan 06, 2018 3:06 pm

Hi Hopki,

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

Kind regards,
Stefan
User avatar
Hopki
Gnome
Posts: 10853
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sat Jan 06, 2018 11:01 pm

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
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Sun Jan 07, 2018 2:01 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Mon Jan 08, 2018 1:27 pm

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
Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Mon Jan 08, 2018 9:56 pm

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

Mon Jan 08, 2018 11:26 pm

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

Code: Select all

<div class="scroll-wrapper">
<iframe width='300' height='400' src='content.html' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
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.

logic-block.jpg
logic-block.jpg (165.64 KiB) Viewed 4071 times


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

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Jan 09, 2018 2:36 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Tue Jan 09, 2018 6:08 pm

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

Tue Jan 09, 2018 10:26 pm

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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Tue Feb 13, 2018 8:25 am

Hi Tony,

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

Regards,
Stefan
Three65
Posts: 8
Joined: Mon Jun 01, 2020 10:55 pm

Thu Jun 25, 2020 6:42 pm

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?
Post Reply