This tutorial continues from Part 1 where we created the multiple image gallery.

Listen to this NotebookLM Audio Podcast generated from the post’s content.

Note: Click on any image for a larger view

Overview and Tutorial Files

In Part 1 of this tutorial, we will modify the 'Single Image Gallery' Pano2VR project and;

import two additional flat images
set uniform viewing parameters across the nodes
enable Direct Node Access
create the thumbnail images
generate the new 'Multiple Image Gallery' output
review the Zoom controller

In Part 2 of this tutorial, we will modify the 'Image Zoom' Pano2VR project and;

add two additional 'point hotspots' for the new images
create an element in the skin that displays the thumbnail and title previews
add new variables, logic blocks and placeholders
generate the 'Image Zoom Pan' output and review the final project

Note: this tutorial assumes a basic knowledge of Pano2VR V7.1.4
Note: the images Ulusaba_RockLodge, leopard, boomslang and rhino are all copyright Tony Redhead. I'm happy for you to use them to build the tutorial files but if you want to use them in for other purposes please contact me at tony@tonyredhead.com
FYI: the boomslang is a large venomous snake found in Sub-Saharan Africa and this one I photographed was in a tree extremely close to the location where we boarded the safari vehicles in the morning

1. Add the Additional Point Hotspots and Update the Properties

1.1: Open 'image_zoom_pan.p2vr' from the 'Project' folder in the Tutorial folder (Figure #1)

1.2: Click on the point hotspot to make it active and open the 'Properties - Point Hotspot' panel (Figure #2)

1.3: Set the Properties - Point Hotspot as follows;

Description: = gallery
Link Target URL: = gallery_thumbnails
Target: = leopard (Figure #3)

Note:
gallery is the name of the folder that contains the output from the gallery_zoom project.
gallery_thumbnails is the name of the folder that contains the thumbnails
leopard is the Custom Node ID that we want to associate with this hotspot.

Note: you can have multiple galleries with different names. To reference the different galleries change the Description: entry to match the gallery folder name.

The same applies to the thumbnails folder as well.

1.4: In the 'Viewer' window, click on the hotspot to make it active if it's not already. Right click in the viewer window and select 'Copy Active Point Hotspot' from the popup menu (Figure #4)

1.5 Right Click anywhere in the viewer window and select 'Paste Point Hotspot' from the popup menu (Figure #5)

1.4: Position the Point Hotspot on the panorama (Figure #6)

1.5: With the new hotspot selected update the 'Properties - Point Hotspot' settings to;

ID: = Point02
Title: = Boomslang at Ulusaba, Sabi Sands
Link Target URL: = gallery_thumbnails
Target: = boomslang (Figure #7)

1.6: Repeat the 'Copy Active Point Hotspot, 'Paste Point Hotspot' and position a new point hotspot on the panorama (Figure #8)

1.7: With the hotspot still selected update the Properties - Point Hotspot settings to;

ID: = Point03
Title: = Rhino
Link Target URL: = gallery_thumbnails
Target: = rhino (Figure #9)

1.8: Save the Project

2. Create new Skin Variables

Note: when the users mouse is over the hotspot we want to show the thumbnail (created in Part 1) for that particular node.
The first step is to create variables that will hold the placeholder content for ‘Description’, 'Link Target URL' and 'Target' created previously.

2.1: Click on the 'Edit Skin' button to open the 'Skin Editor' (Figure #9)

2.2: If the Properties > Variables dropdown menu isn't visible click on an empty area of the Canvas. Double-click in the blank 'Name' field to add a new variable. (Figure #10)

2.3: Create a new variable Name: = MyPageURL. Click on the Type field and select Type: = Text from the dropdown menu (Figure #11)

2.4: Create a second variable Name: = MyCustomNode and Type: = Text (Figure #12)

2.5: Create a third variable Name: = MyGallery and Type: = Text (Figure #13)

2.5: Save the skin as 'image_zoom_pan_multiple.p2vr' (Figure #14)

Note: close the skin to update the 'Skin:' location in the project

2.6: Click on the 'Skin Edit' button to open the skin again

3. Create the Preview Elements

3.1 Click on the 'Draw External Image' menu icon and click once in the skin to add the External Image (Figure #15)

3.2: Drag the External 1 element onto the ht_info element to change it to a child element of the hotspot (Figure #16]

3.3: With the 'External 1' element selected open the Properties > Position dropdown menu and apply the following settings; (Figure #17)

ID: preview_thumbnail
Anchor: center
Position: X: 0px Y: -100px
Width: 140 px
Height: 90 px

Figure #17: preview_thumbnail position settings

3.4: With the 'preview_thumbnail' element selected open the Properties > Rectangle' dropdown menu and apply the following settings; (Figure #17)

Background: Color: black
Border: Width: 3

Figure #17: set preview_thumbnail rectangle properties

3.5: With the 'preview_thumbnail' element selected open the Properties > External Image' dropdown menu and apply the following settings; (Figure #18)

Content Scaling: Fill | Check = Never enlarge | Alignment: center

Figure #18: External Image content scaling settings

3.6: With the 'preview_thumbnail' element selected open the Properties > Appearance dropdown menu and apply the following settings; (Figure #19)

Visible Checkbox: unchecked
Visible: Logic Block active

In the Logic Block settings apply the following logic

Trigger: Mouse Over Parent
Comparison: =
Value: True
Visible: True

Figure #19: hotspot_preview settings & logic block

4. Update the Hotspot Actions

4.1: Select the 'ht_info' hotspot to make it active. Open the Properties > Actions dropdown menu.

4.2: Double-click in the blank 'Source' field to add a new action (Figure #20)

Source: Mouse Enter
Action: Set Variable Value
Parameters: Set(=)/$(hd)
Target: MyGallery (Figure #30)

4.3: Double-click in the next blank 'Source' field to add a new action (Figure #31)

Source: Mouse Enter
Action: Set Variable Value
Parameters: Set(=)/$(hu)
Target: MyPageURL (Figure #21)

4.3: Double-click in the next blank 'Source' field to add a new action (Figure #22)

Source: Mouse Enter
Action: Set Variable Value
Parameters: Set(=)/$(hu)
Target: MyCustomNode

4.5: Double-click in the next blank 'Source' field to add a new action (Figure #24)

Source: Mouse Leave
Action: Set Value
Value:
Target: preview_thumbnail

5. Update the Image Viewer iFrame

5.1: Click on the ‘Information’ element arrow to open it and with the 'info_text_body' element selected open the Properties > Text' dropdown menu.

Note: the single image version uses the following iframe code;
<iframe src="gallery/index.html" width="100%" height="100%" frameborder= "0" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
As we have multiple images we need to use the variables we created to dynamically update the scr URL.

5.2: Replace the old iframe code with the new code below. (Figure #22)

Figure #22: Update text in info_text_body

Note: in this new version we will be loading the gallery folder containing the zoom images output into the assets folder.

5.3 Save and close the skin

7. Setting the Properties - Web Output Assets

Note: the final step is to set up the links to the gallery Assets

7.1: Open the Properties - Web Output > Advanced panel.

7.2: In the tutorial folder open the Assets folder and drag the gallery and gallery_thumbnails folders onto the Advanced > Assets > File or Folders list. (Figure #23)

Figure #23: Adding the gallery and gallery_thumbnails folders to the Files or Folders list

Note: when the project is published those folders and their content will automatically be added to the assets folder within the Output folder.

7.3: Output the Project

Note: now when you mouse over a hotspot the corresponding thumbnail is displayed. (Figures #24, 25, 26)

View the final project in a new browser

7.4: Save the Project and close it.

8. Exposed Skin Colors

Note: in a Pano2VR skin you can expose element colors so that you can quickly edit those colors in the output panel – without opening the Skin Editor. This is called exposing.
In Part 1 the final project is shown with colored icons and colored backgrounds for the thumbnails and a colored controller. The supplied tutorial files already have pre-defined skin colors that can be used to easily change the color of these elements. (Figure #27)

Note: in this section we will change the original black color of the elements to a yellow color to match one of the logo colors.

8.1 Open the gallery_zoom.p2vr project

8.2 Click on the ‘Edit Skin Configuration’ button to open the ‘Edit Skin Configuration’ window (Figure #28)

Figure #28: Edit Skin Configuration window

Note In the window, under ‘Skin Colors’ there are three options;

hotspot-bg: this is the color of the element background (currently black)

hotspot-text-icon: the color of any text or icon as part of the element
hotspot-trans-bg: the transparent color of the background (controller and text thumbnail)

and under ‘Skin Parameters’ there is one option;

Active Anchor [fullscreen]: when checked, regardless of the set position of the controller it will always appear in the bottom right when fullscreen is active (Figure #29)

Figure #29: Skin Colors and Skin Parameters

8.3: Click in the hotspot-bg ‘Modified’ box to open the ‘Select Color’ window (Figure #30)

8.4: Select the yellow color from the Custom Colors or any color of your choice and click OK. (Figure #31)

8.6: Select the yellow color from the Custom Colors or any color of your choice.

8.7 Check the Alpha settings and set it to 100 if it’s not already set. Click OK. (Figure #33)

8.8: Click OK to close the Edit Skin Configuration window

8.9: Save the project and then output the project.

Note: the controller now displays the updated colors (Figure #34)

Note: the next step is to update the colors in the image_zoom_pan project

8.10: Open the image_zoom_pan.p2vr file and click on the Edit Skin button to open the image_zoom_pan_multiple skin in the editor.

8.11: Click on the ht_info element arrow to reveal the child elements and click on the preview_thumbnail element to select it. (Figure #35)

Figure #35: preview_thumbnail element selected

Note: as this element was added to the tutorial skin it doesn’t have any of its colors exposed so we need to expose the black background.

8:12: With the preview_thumbnail element selected click on the ‘Color Tool’ button to open the ‘Change Colors’ window. (Figure #36)

Figure #36: Change Colors window for the preview_thumbnails

8.13: Click on the arrow next to the Original Color and then right-click in the ‘New Color - External Image Element Background’ and select hotspot-bg from the dropdown menu. (Figure #37)

Figure #37: Exposing the preview_thumbnail element background

8:14: Repeat with the ‘New Color - External Image Element Border’ and select hotspot-bg from the dropdown menu. (Figure #38)

Figure #37: Exposing the preview_thumbnail element border

8:15: Save and close the skin

8:16: Repeat the steps 8:3 to 8.8

8:17: Save the project and then output the project.

Note: now the icons, tooltip backgrounds and the thumbnail background are recolored. (Figure #38)

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate