Tutorial - Scrolling iFrames in the Gallery Component

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Tony
Posts: 737
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tutorial - Scrolling iFrames in the Gallery Component

Post by Tony » Tue Jan 16, 2018 11:07 pm

Hi,

I've just created a new tutorial that goes step-by-step through the workflow to add HTML files to the Gallery Component and enable scrolling of the framed content in iOS devices.

Update - 28/01: In order to resolve some issues around the Desktop version of the final output additional .html assets and a new gallery_styles.css file have been developed and there is a new download zip file https://rebrand.ly/scrolling-tutorial-zip

The tutorial covers the implementation of scrollable iFrames within the built-in Gallery Component. It was developed in response to a forum post viewtopic.php?f=6&t=11633 in regard to loading external web pages into the gallery and then a further discussion on how to enable scrolling on iOS devices.

If the standard method of loading web pages into a text box is used, scrolling will be available on the desktop but not on iOS devices. To enable the scroll function on iOS requires some workarounds that this tutorial will cover in detail.

Here's a link to the finished tutorial project https://rebrand.ly/scrollfinal

The tutorial is quite long so I've divided it into two parts and it comes with assets you can use in the tutorial.

Part 1 https://tonyredhead.com/pano2vr/scrolli ... mes-ios-p1 covers;
  • Assets used in the Tutorial
  • Requirements and Test Devices
  • Setting up the Project Folder
  • Setting up the Basic Project
  • Adding the Gallery Component
Part 2 https://tonyredhead.com/pano2vr/scrolli ... mes-ios-p2 covers;
  • Modifying the Gallery Component
  • Setting up the iFrames
  • Resolving the double scroll issue on Desktops
I would appreciate any feedback or issues you find with it.

cheers,

Tony
Last edited by Tony on Sun Jan 28, 2018 12:13 am, edited 2 times in total.
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
Hopki
Gnome
Posts: 9365
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Re: Tutorial - Scrolling iFrames in the Gallery Component

Post by Hopki » Wed Jan 17, 2018 10:24 pm

8)

User avatar
keith@fachwen.org
Posts: 110
Joined: Tue Aug 28, 2012 11:34 am
Location: North Wales
Contact:

Re: Tutorial - Scrolling iFrames in the Gallery Component

Post by keith@fachwen.org » Fri Jan 19, 2018 1:48 pm

Hi Tony,

Thanks for that. I'll look forward to working through it!

I've not thought of adding a web page to a text box inside a panorama before.

I'm just starting to re-engage with Pano2VR after a little break, patiently waiting for version 6 with built in floor planning design, amongst other things.

As an aside, do you think it is possible/practical to add a web page, with any kind of coding, to a text box that doesn't rely on the gallery component?

What I've been asked to do recently is put a clients Instagram photo feed into a 360 tour so they can add stuff to instagram and this would automatically update the Tour, without my intervention. Could be quite useful?

Same might apply for Flickr photo feeds, etc.

It would be good to have this kind of window appear without having to rely on any user interaction.

Thanks,

Keith

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

Re: Tutorial - Scrolling iFrames in the Gallery Component

Post by Tony » Fri Jan 19, 2018 2:37 pm

Hi Keith,
I'll look forward to working through it!
Great, let me know if you run into any issues or something doesn't make sense.
I've not thought of adding a web page to a text box inside a panorama before.
I use it in projects where the client wants to update information on a regular basis. Here's a sample site where the Cruise News and Location hotspots are simple text boxes with an iFrame that loads an html page. Not only that it loads an English, French or German language version using a logic block. http://expedition.photography/Brown-Bluff
As an aside, do you think it is possible/practical to add a web page, with any kind of coding, to a text box that doesn't rely on the gallery component?
When you go through the tutorial you will see that the external image element is replaced with a text box. To add the iFrame you need the text box.
What I've been asked to do recently is put a clients Instagram photo feed into a 360 tour so they can add stuff to instagram
I just did a quick test on the Final version of the panorama in the tutorial and replaced the first gallery page with Instagram embed code. I'm not too familiar with the Instagram embed options so you will probably do it better than I can. You can check it out at https://rebrand.ly/scrollinstagram

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
keith@fachwen.org
Posts: 110
Joined: Tue Aug 28, 2012 11:34 am
Location: North Wales
Contact:

Re: Tutorial - Scrolling iFrames in the Gallery Component

Post by keith@fachwen.org » Fri Jan 19, 2018 2:51 pm

Great, thanks for that Tony!

I will have to get stuck in!

It would be really nice of course if some of this functionality was built into the app itself as a component of tool like Patches, etc :shock:

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

Re: Tutorial - Scrolling iFrames in the Gallery Component

Post by Hopki » Fri Jan 19, 2018 4:02 pm

Hi Guys,
Yeah we are on the look out for any changes that will make the possible.
For now the only workaround is stacking iframes.

You could of course make this and save as a component.
In the component you could add a text box with the relevant HTML code so you could just copy and paste this in a plan text doc and save as HTML to make the first HTML page.
Regards,
Hopki

Post Reply

Who is online

Users browsing this forum: No registered users and 4 guests