Load external webpage into gallery-component

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

Load external webpage into gallery-component

Post by AVBuild » 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: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Load external webpage into gallery-component

Post by Hopki » 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

mphoto
Posts: 16
Joined: Thu Sep 01, 2016 3:47 pm

Re: Load external webpage into gallery-component

Post by mphoto » 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: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Load external webpage into gallery-component

Post by Hopki » 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

Nougatti
Posts: 15
Joined: Thu Aug 18, 2016 12:57 pm

Re: Load external webpage into gallery-component

Post by Nougatti » 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: 8754
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Load external webpage into gallery-component

Post by Hopki » 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

User avatar
Tony
Posts: 542
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Load external webpage into gallery-component

Post by Tony » 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

Re: Load external webpage into gallery-component

Post by Nougatti » 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

Re: Load external webpage into gallery-component

Post by Nougatti » 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: 542
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Load external webpage into gallery-component

Post by Tony » 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 1467 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: 542
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Load external webpage into gallery-component

Post by Tony » 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

Re: Load external webpage into gallery-component

Post by Nougatti » 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: 542
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Load external webpage into gallery-component

Post by Tony » 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

Re: Load external webpage into gallery-component

Post by Nougatti » 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

Post Reply

Who is online

Users browsing this forum: Exabot [Bot] and 23 guests