Скачать или смотреть Extending Pano2VR | Building an Image Gallery with JavaScript

Tutorial #5 shows the whole process of building up a JavaScript based image gallery which can be opened from a hotspot.

First you learn from the Pano2VR expert Thomas Bredenfeld (https://panorama.blog), how to setup a useful data format for image filenames and captions for gallery hotspots and how to process this hotspot data.

In the second part you see how to prepare the gallery object and how to tweak it before letting it show up in a skin popup. Integrating such an image gallery into a Pano2VR project is a good example of making external JavaScript libraries work smoothly together with Pano2VR.
---
01. Introduction: What do we want to achieve?

00:00:00 1.01. Introduction
00:03:18 1.02. General approach
00:05:59 1.03. Choosing a JavaScript library

02. Project setup

00:08:41 2.01. Create VS Code workspace
00:09:12 2.02. Create library folder
00:10:52 2.03. Download lightGallery
00:15:21 2.04. Add jQuery
00:16:28 2.05. Link external folders to project file

03. Setup skin for extension

00:18:19 3.01. Add own JS and CSS with code element
00:23:56 3.02. Create custom JavaScript file
00:26:44 3.03. Check file/folder structure
00:28:22 3.04. Setup popup box
00:32:32 3.05. Setup hotspot
00:34:55 3.06. Setup basic hotspot actions

04. Prepare gallery hotspot

00:38:08 4.01. Add gallery data to hotspot
00:42:37 4.02. Setup debug helper
00:45:57 4.03. Check JavaScript file with jQuery
00:49:14 4.04. Add JavaScript call to hotspot
00:52:07 4.05. About JavaScript scope

05. Process image data for gallery

00:57:57 5.01. Retrieve data from hotspot
01:01:27 5.02. Convert data for gallery usage
01:08:01 5.03. Cycling through an array
01:12:54 5.04. Prepare data for gallery
01:20:22 5.05. Fine tuning gallery data
01:24:01 5.06. Summary so far and some cleanup

06. Build JavaScript image gallery

01:26:19 6.01. Setup gallery function
01:31:28 6.02. Create gallery settings object
01:37:07 6.03. Create gallery object and test it
01:42:30 6.04. Fix image height
01:48:04 6.05. Fix sticking images
01:54:12 6.06. Modify CSS for image description
01:57:27 6.07. Alter gallery settings for single image display

---

Links mentioned in this tutorial:

jQuery
https://api.jquery.com

lightGallery
https://www.lightgalleryjs.com

lightGallery documentation
https://www.lightgalleryjs.com/docs

lightGallery settings
https://www.lightgalleryjs.com/docs/s...

lightGallery download
https://github.com/sachinchoolur/ligh...

Regex helper
https://regex101.com

---

LEARN MORE:

SUPPORT:
general documentation: https://ggnome.com/wiki/documentation/
pano2vr 7 documentation: https://ggnome.com/doc/pano2vr/
blog: https://ggnome.com/blog
email: [email protected]