Garden Gnome Software

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

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

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

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

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