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
Part 1 has not changed however the final section, 'Resolving the double scroll issue on Desktops' , in Part 2 has been revised.
INTRODUCTION
This is Part 2 of the tutorial that covers the implementation of scrollable iFrames within the built-in Gallery Component. For more information on the project view Part 1.
PART 1 & 2
This tutorial has been divided into two parts. Part 1 covers the following;
- 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 covers;
- Modifying the Gallery Component
- Setting up the iFrames
- Resolving the double scroll issue on Desktops
Modifying the Component
The next step is to modify the settings and values within the Gallery Simplex Component to integrate the content we want to present. By default the Gallery Simplex Component is set to display 15 slides, our example will contain 3 slides.
1. Open up the 'Skin Editor' by clicking the 'Skin editor' button
2. With nothing in the 'Tree' selected, open the 'Variables' tab, in 'Properties' and change the 'Init Value' for 'gallery_pictures' to 99 (figure #1)
Note: this change is part of a workaround for an issue with iOS that displays iFrame content even though set to hidden
figure #1: gallery_pictures global variable set to 99
3. Select the button 'gallery_close'
4. Expand the 'Actions' section
5. Double click in the field with the target 'gallery_pictures' to open the 'Action Settings' window
6. Change the 'Value Parameters' from 'Set(=)/0 to 'Set(=)/99' and click on 'OK' (figure #2 & #3)
figure #2: gallery_close set variable value to 99
figure #3: gallery_close variable updated
7. Select the button 'gallery_show_hide'
8. Expand the 'Actions' section
9. Double click in the blank field to open the 'Action Settings' window
10. Set the following;
Source: Mouse Click
Action: Set Variable Value
Variable Name: gallery_pictures
Operation: Set(=)
Value: 0
(figure #4 & #5)
figure #4: Set Variable Value for gallery_show_hide
figure #5: New Variable Value for 'gallery_show_hide'
11. Expand the 'gallery_controler' container by clicking on the small arrow
12. Select the text field element 'gallery_counter_total'
13. Expand the 'Text' section and change the value from /15 to /3 (figure #6)
figure #6: Set text value to /3
14. Select the button element 'gallery_forward'
15. Expand the 'Actions' section and double click on the 2nd action to modify it
16. In the 'Action Settings' window change the Value: from 15 to 3 and select 'OK' (figures #7 & #8)
figure #7: Set the Value to 3
figure #8: New Variable Value for 'gallery_forward'
17. Select the button element 'gallery_back'
18. Expand the 'Actions' section and double click on the 1st action to modify it
19. In the 'Action Settings' window change the Value: from 14 to Add(+)/2 and select 'OK' (figure #9)
figure #9: New Variable Value for 'gallery_back'
20. With the 'gallery_back' still selected and the 'Actions' section expanded, double click on the 2nd action to modify it
21. In the 'Action Settings' window change the Value: from 15 to Mod(%)/3 and select 'OK' (figures #10 & #11)
figure #10: New Variable for 'gallery_back'
figure #11: New Variable Value for 'gallery_back'
The final step is to delete the 'gallery_picture_preload' element, in the 'gallery_controler' container, as it's not required for the html iframe content.
22. Select the 'gallery_picture_preload' element and right click and select 'cut' or '⌘X' to delete the element (figure #12)
figure #12: Delete 'gallery_picture_preload' element
23. Click 'Close' and click 'Save' the skin
24. Click 'Generate Output' and test the output. You will now have a count of 3 slides but no content as we haven't set up any frames yet.
Setting up the iFrames
Adding the iFrames
The Gallery Component has by default a 'Draw External Image' holder element called 'gallery_picture'. As we will be loading .html files we need to remove that element and replace it with a Text box.
1. Open the Skin Editor, select the 'gallery_pictures' element in the canvas and delete it
2. Select the 'Draw text field' option, from the Skin Editor, menu and click in the canvas to add a text box (figure #13)
figure #13: Text box added to the Canvas
3. With the 'text box' selected add the following settings to the 'Position' tab in the Properties section: (figure #14)
ID: gallery_pictures
Position: X: 175 pixels, Y: 65 pixels (or center horizontally/vertically from menu)
Anchor: Center
Size: Width: 290 pixels, Height: 350 pixels
figure #14: 'gallery_pictures' position settings
4. With the 'text box' still selected add the following settings to the 'Appearance' tab: (figures #15 & #16)
Visible: Uncheck
5. Add a Logic Block by clicking on the 'arrow' next to 'Visible' and set the following logic;
Trigger: *gallery_show_hide | Comparison: = | Value: true | Visible: true | Default Value: Visible: false
6. Click 'OK' to close the Logic Block window
figure #14: 'gallery_pictures' appearance settings
figure #15: 'gallery_pictures' 'appearance | visible' logic block
7. With the 'text box' still selected add the following settings to the 'Text' tab: (figures #16 & #17)
Text: delete any text from the text box
8. Add a Logic Block by clicking on the 'arrow' next to 'Text' and set the following logic:
Create 4 x Logic Blocks
Logic Block #1
Trigger: *gallery_pictures | Comparison: = | Value: 99 | Text: empty field
Note: the first logic block 'Value:' is 99 and the 'Text:' field is empty. This resolves and issue where iOS displays the iFrame content even if the Visible option is unchecked. As the field is empty there is nothing to show
Logic Block #2-4
Trigger: *gallery_pictures | Comparison: = | Value: 0/1/2 | Text: <iframe width='300' height='350' src='includes/01/02/03.html' frameborder='0' scrolling='no'></iframe>
figure #16: 'gallery_pictures' text settings
figure #17: 'gallery_pictures' 'text | text:' logic block
9. Click 'OK' to close the Logic Block window
10. Click 'Close' to close the 'Skin Editor' window and 'Save'
11. Click 'Generate Output' and test the output. You will now have a count of 3 slides showing the HTML content.
Note: If you are viewing this tutorial on a mobile device you will not be able to scroll the views unless you open the freestanding version in a browser from this link: http://rebrand.ly/scrollhtml
The double scroll bar issue
If you are viewing the panorama above on an iOS mobile device, in Safari or Google Chrome, everything looks and works as expected. However if you are viewing it on the desktop then you will see extra scroll bars.
Unfortunately the use of the additional html page, that applies the scrolling css fix for iOS, introduces an additional scroll bar when viewed on the desktop (figure #18 & 19)
figure #18: desktop version with horizontal scroll
figure #19: horizontal scroll reveals second vert scroll
Fortunately there is a simple way we can resolve this issue within Pano2VR by using two 'gallery_picture' elements and the 'IsMobile' trigger to show one or the other depending upon the type of device, either Mobile or Desktop.
Note: When the device is a mobile device the 01.html and 01_content.html files are loaded, when the device isn't a mobile device the 01_dt-content.html file is loaded.
Applying the double scrollbar fix
1. Open the 'Skin Editor'
2. Select the 'gallery_pictures' element in the tree
3. Open the 'Appearance' tab
4. Open the Logic Block by clicking on the 'arrow' next to 'Visible:'
5. Add a second entry, Trigger: Is Mobile | Comparison: = | Value: true (an 'And' function will be automatically added under Operation: on the first Trigger) (figure #22)
6. Select 'OK'
figure #22: IsMobile trigger true
12. With the 'gallery_pictures' element still selected ⌘C to copy the element and ⌘V to paste the element back into the Canvas.
Note: You will now have two 'gallery_pictures' elements with the same Properties
13. With the 'text box' selected add the following settings to the 'Position' tab in the Properties section: The Desktop 'text box' needs to be slightly larger to accommodate the scrollbar. (figure #23)
ID: gallery_pictures
Position: X: 170 pixels, Y: 65 pixels (or center horizontally/vertically from menu)
Anchor: Center
Size: Width: 299 pixels, Height: 349 pixels
figure #23: Desktop gallery_pictures
14. With the new 'text box' selected open the 'Appearances' tab
15. Open the Logic Block by clicking on the 'arrow' next to 'Visible:
16. Modify the second logic entry by changing 'Value:' from true to 'false'
17. Click on 'OK' to close the Logic Block (figure #24)
figure #24: IsMobile trigger false
18. Open the 'Text' tab
19. Open the Logic Block by clicking on the 'arrow' next to 'Text:'
20. Modify the <iframe> code on each trigger to 01/02/03_dt-content.html
21. Click 'OK' to close the 'Logic Block Settings' window (figure #25)
figure #25: IsMobile false 'gallery_pictures' text:' logic block
22. Click 'Close' to close the 'Skin Editor'
23. Click 'Save' to save it
24. Save the Project
25. Click 'Generate Output' and test the output.
You will now have a count of 3 slides showing scrolling HTML content that works in both iOS mobile devices and non-mobile desktops
Note: to view the actual scrolling effect in the above example you will need to open the tour in a new browser window by clicking on this link https://rebrand.ly/scrollfinal
