Gallery Project using Pano2VR as the gallery builder

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
This project uses Pano2VR to build two galleries and three image popups with zoom as well as building the tour.

Please see this example.

Node1 has two gallery Hotspots and node4 has three image hotspots but use the same Hotspot Template.

The project can be download from here: LINK.
1) Open and build both Gallery Projects and the three Single Image Projects, these will export g1, g2 and i1, i2 and i3
2) The project will add all these folders under the assets
3) Build the Tour project

Both single image and gallery skins have an information button that only shows if there is text to show.
The skins use User Date:
Title for title
Description to add to the title of the image, as an example, title, House then, description, Kitchen. So it will be displayed as House - Kitchen.
Then the Information text field is used for the Information popup within the image or gallery
If there is no information text the information button will not show.

The galleries also have thumbnail menus that also adjust the player margins so the menu does not overlay on the images.
There are two gallery skin versions, one with the thumbnails positioned at the top of the window and the other to the right side.
The single image skin has zoom, home fullscreen and information if provided.

The panorama project has the gallery names in the hotspot description text fields, so g1, g2, i1, i2 and i3
The Gallery Point Hotspot sets an iframe to the text box that displayed the image or gallery, gallery_display.
The iframe uses the placeholder $(hd) so uses the information in the point hotspots description text field to open the correct content.

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

If you only want zoomable single image popups and not a gallery, but your project has many, you can use one Pano2VR project.
The idea is you can use Direct Node Access, so using one project file add all your images.

The project would output one folder and open with the first popup image. You would then use Direct Node Access to see the others.
As an example assets/image_popup/index.html#node2
For this, to work, the pano skin has been modified. The hotspot that will open the single images has the ID ht_image_zoom.
The iframe has also been modified:

Code: Select all

<iframe src="assets/image_popup/index.html#node$(hd)" width="100%" height="100%" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" frameborder= "0" ></iframe>
You will see it is looking for the path: assets/image_popup/index.html#node$(hd).

This means all you enter in the hotspots description to open the popup is the number.

1.png
1.png (32.92 KiB) Viewed 15154 times

So this would open assets/image_popup/index.html#node3.


The image popup project is attached.
Regards,
Attachments
single image popup.zip
(3.25 MiB) Downloaded 512 times
pano_skin.ggsk
(15.36 KiB) Downloaded 476 times
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/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Very interesting, thanks for sharing this.
If one wouldn't want to zoom in to enlarge the gallery images but just have it one step larger.
Let's say factor 1.5
What would be the appropriate action for this?

Answer to self: Perhaps View/Move to View/FoV?
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

So here's a real question:
How do I set the iframe to be transparent?
I just want to see teh image. No sorrounding.
I removed screentint and everything, even tried CSS in the source of the gallery (i1) but no luck.
I always have a black background.

And isn't there a more elegant way instead of having 5 projects for 5 single images?
Like using one project and have the images altered through variables?
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

And isn't there a more elegant way instead of having 5 projects for 5 single images?
Like using one project and have the images altered through variables?
The above post for zoomable single images does this?
It uses one project which would have as many flat images as you want.
You would then activate Direct Node Access as found under the HTML5 output and HTML tab.
You would then open each node using DNA, for example, the iframe src is:

src="assets/image_popup/index.html#node$(hd)"

Then in the description text field of the Point Hotspot, you would have 1, 2, 3, etc, so the node would then open #node1, #node2 etc.
Regards,
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/
JSchrader
Posts: 141
Joined: Sat Nov 28, 2015 2:26 pm

Oh, right!
This should work, thank you!
BSands
Posts: 10
Joined: Tue Jun 12, 2018 7:12 pm

Hi,

I'm a real novice at this, and to be honest it's a little baffling (sorry).

I have 5 images that I want to be able to hit a hotspot for each. I am adapting the silhouette_autohide skin, but it has now been edited quite a lot as I've discovered how to do various things. I currently have the images on the end of a simple image hotspot, but it is scaled to fit a window which comes up very small when viewed on a mobile. Therefore I want to be able to make a zoomable image link. I thought this thread would help me, and I believe that it's what I need to do, but I don't really understand how to implement it.

My current tour has a still overview image as a start, with just 3 panoramas linked. I have 5 further still images that will be linked from various locations within the overview image and the panoramas, so I think it will be best if I can simply have them within the same tour. However it seems that your example links to separate tours (unless I've missed the point?). Do I need to link to a different tour in order to have a new interface?

I hope someone can point me in the right direction.

Thanks a lot,

Bill

EDIT: I've actually worked it out finally :D It turns out that it does help to download the example files and read the instructions above. I confess I did not find it straight forward in any way, but got there eventually.
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Bill,
Glad you got it sorted, we try to add working projects as much as possible to help people.
Regards,
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/
dewilloyd
Posts: 4
Joined: Wed Feb 17, 2021 3:00 pm

Hi,

This gallery project has really helped me out with this project :
http://dewitannattlloyd.co.uk/weareallcommoners/

However, I’m getting feedback that they don't like the way it crop’s the gallery images as this is dependant on the viewing aspect ratio.
Is there any way of having that window display the full image based on the window height?

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

Hi Dewi,
For the Gallery projects, you want to use the show borders option, check out the webinar: https://ggnome.com/gg_webinars/embeddin ... -projects/
Watch from time index 13:20 which covers the gallery.
Regards,
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/
LaurentVR
Posts: 41
Joined: Mon May 25, 2020 11:21 am

Hello Martin,

I try to work on this because I have a 50+ nodes with galleries to diplay...

When creating the initial project, the "gallery_display" is positionned on the corner left of my screen.

See Image

I don't understand why because the size is calc(100% -60px) and it works on your on-line project! :)

Any idea :?:

Thanks,
Laurent
d-zimin
Posts: 30
Joined: Thu May 21, 2020 12:04 pm

LaurentVR wrote: Fri Oct 21, 2022 12:05 pm I don't understand why because the size is calc(100% -60px) and it works on your on-line project! :)

Any idea :?:

Thanks,
Laurent
It must be a Space between "-" and "60px"
calc(100% - 60px)
BostonRavi
Posts: 8
Joined: Wed May 10, 2023 10:31 am

I've implemented this solution to created a number of galleries in our tour (which we just launched today! :D)

Question about making galleries this way: I'd like to fix the dimensions of the photos–right now if you resize the window (as one might do on mobile), the gallery images are adjusting to fill the new shape/dimensions of the gallery window, which means that parts of the image are now not displaying. Is there a way to set it so that the images keep their native aspect ratio, even if there's empty space either on top/bottom or left/right?
Post Reply