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
Load external webpage into gallery-component
- Hopki
- Gnome
- Posts: 13032
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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
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>
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
Garden Gnome 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/
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/
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
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
- Hopki
- Gnome
- Posts: 13032
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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
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
Garden Gnome 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/
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/
- Hopki
- Gnome
- Posts: 13032
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
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
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
Garden Gnome 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/
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/
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
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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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
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
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>
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
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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
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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
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
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
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: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/