If you like animated Lightbox-like popup windows (also called as Shadowbox, Fancybox...) to show various content in your tours, you can inspire with my skin.
In my example, there is an iframe-based image gallery with next/previous image buttons, image counter, zoom in/out and fullscreen features.
How it works you can see here.
All the job is done only with skin editor and, of course, you can adjust the animation parameters or replace the popup content to desired format (single images, text, PDF...)
Project files attached.
Jare
Animated Lightbox
- Attachments
-
- lightbox.zip
- (1.06 MiB) Downloaded 2928 times
Thank you Jaroslav!
Hi Dinesh,
in my example the photo gallery is created as a separate pano2vr project based on flat images. Then the gallery is placed into lightbox using iframe.
There is detailed tutorial by Tony Redhead, where you can learn more https://tonyredhead.com/pano2vr/p2vr-fu ... -viewer-p1
in my example the photo gallery is created as a separate pano2vr project based on flat images. Then the gallery is placed into lightbox using iframe.
There is detailed tutorial by Tony Redhead, where you can learn more https://tonyredhead.com/pano2vr/p2vr-fu ... -viewer-p1
Just add multiple flat panos to your project, to navigate use next/prev buttons (mouse click>open next panorama>next node).
Also if you turn on Direct Node Access you can have a hotspot that opens the slideshow at a particular image, which is pretty cool
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/
Hello guys,
I since followed a different guide of Tony's appending the #node to the end of the url within the iframe. I am at the point where I can view the different flat images when I click on the hotspots. However, the thumbnails and the title isn't showing up. Only the image icon is visible and I can click on it to view the flat images. I think the order of the files in the skin is wrong. If I place the file in different order, I can see the thumbnails, but the appearance isn't working as the guide suggest. The title doesn't disappear after I click on it.
ISSUE FIXED: The text instructions at 4.2 with the screenshots were conflicting. I followed the screenshot and was wrong. The text stating 'mouse over' is correct for the two inputs. -------
This is the guide I am using.
https://tonyredhead.com/pano2vr/p2vr-fs ... xtended-p2
Here is the screenshots of the skin in question and the output.
EDIT: Further playing with the skin, the output looks like this when I move all the files out of the 'hotspot_preview' folder.
I since followed a different guide of Tony's appending the #node to the end of the url within the iframe. I am at the point where I can view the different flat images when I click on the hotspots. However, the thumbnails and the title isn't showing up. Only the image icon is visible and I can click on it to view the flat images. I think the order of the files in the skin is wrong. If I place the file in different order, I can see the thumbnails, but the appearance isn't working as the guide suggest. The title doesn't disappear after I click on it.
ISSUE FIXED: The text instructions at 4.2 with the screenshots were conflicting. I followed the screenshot and was wrong. The text stating 'mouse over' is correct for the two inputs. -------
This is the guide I am using.
https://tonyredhead.com/pano2vr/p2vr-fs ... xtended-p2
Here is the screenshots of the skin in question and the output.
EDIT: Further playing with the skin, the output looks like this when I move all the files out of the 'hotspot_preview' folder.
The content of lightbox is a simple text box as a iframe, so there any content can be placed. In my example it is image galery based on flat panos, done in pano2vr.Me gustaría saber como hacerlo también!
@op
Hello, In your example url, how to create the white vertical line for each of the hotspots?
In my case, I want to have a vertical line with an offset. Something like this img below. I need one that veers right and one that veers left. I suppose I will need to create 2 different hotspot template??
Hello, In your example url, how to create the white vertical line for each of the hotspots?
In my case, I want to have a vertical line with an offset. Something like this img below. I need one that veers right and one that veers left. I suppose I will need to create 2 different hotspot template??
- Attachments
-
- 2022-03-26_10-43-45.png (167.71 KiB) Viewed 74548 times
Hi,
yes, you can create two hotspot templates.
But if you use v7, there is a new logic block trigger: Hotspot Screen X (%)and Hotspot Screen Y (%). I guess this will help you make it all-in-one.
yes, you can create two hotspot templates.
But if you use v7, there is a new logic block trigger: Hotspot Screen X (%)and Hotspot Screen Y (%). I guess this will help you make it all-in-one.
duceduc wrote: ↑Sun Apr 03, 2022 7:14 am @op
Hello, In your example url, how to create the white vertical line for each of the hotspots?
In my case, I want to have a vertical line with an offset. Something like this img below. I need one that veers right and one that veers left. I suppose I will need to create 2 different hotspot template??