Animated Lightbox

Post Reply
User avatar
jare
Posts: 355
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Animated Lightbox

Post by jare » Wed Oct 17, 2018 2:11 pm

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
Attachments
lightbox.zip
(1.06 MiB) Downloaded 292 times

User avatar
AGrynis
Posts: 6
Joined: Wed Feb 07, 2018 8:57 am

Re: Animated Lightbox

Post by AGrynis » Wed Oct 17, 2018 2:30 pm

Thank you Jaroslav!

User avatar
360Texas
Moderator
Posts: 3358
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Re: Animated Lightbox

Post by 360Texas » Wed Oct 17, 2018 4:05 pm

Thankyou Jare,
After seeing your excellently photographed demo work I'll definately look into this.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com

Dinesh
Posts: 25
Joined: Sat Sep 30, 2017 8:33 pm

Re: Animated Lightbox

Post by Dinesh » Wed Nov 28, 2018 2:53 pm

Hi Jare.

Have downloaded your skin and am exploring it. But can you tell me how to link it to photo/video etc?

Dinesh

User avatar
jare
Posts: 355
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Re: Animated Lightbox

Post by jare » Wed Nov 28, 2018 3:09 pm

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

duceduc
Posts: 31
Joined: Sun Dec 11, 2016 5:39 pm

Re: Animated Lightbox

Post by duceduc » Sun Dec 16, 2018 7:22 am

@jare,

I followed the tutorial you provided on your last post and got it displaying for one flat image. How do I set it up if I have multiple flat images?

User avatar
jare
Posts: 355
Joined: Thu Mar 19, 2009 1:26 pm
Location: RU/CZ
Contact:

Re: Animated Lightbox

Post by jare » Sun Dec 16, 2018 8:48 am

Just add multiple flat panos to your project, to navigate use next/prev buttons (mouse click>open next panorama>next node).

User avatar
Tony
Posts: 818
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Re: Animated Lightbox

Post by Tony » Sun Dec 16, 2018 11:06 am

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: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/

duceduc
Posts: 31
Joined: Sun Dec 11, 2016 5:39 pm

Re: Animated Lightbox

Post by duceduc » Sun Dec 16, 2018 10:16 pm

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.
thumbnail-fix-01.jpg
thumbnail-fix-01.jpg (68.3 KiB) Viewed 2102 times
-------

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.
pano2vr-thumbnails.jpg
pano2vr-thumbnails.jpg (160.31 KiB) Viewed 2116 times
pano2vr-thumbnails-02.jpg
pano2vr-thumbnails-02.jpg (65.52 KiB) Viewed 2114 times

EDIT: Further playing with the skin, the output looks like this when I move all the files out of the 'hotspot_preview' folder.
pano2vr-thumbnail-03.jpg
pano2vr-thumbnail-03.jpg (60 KiB) Viewed 2113 times

duceduc
Posts: 31
Joined: Sun Dec 11, 2016 5:39 pm

Re: Animated Lightbox

Post by duceduc » Tue Dec 18, 2018 7:41 am

@ tony
Regarding your last section fix about Firefox browser showing thumbnail being offset, Edge browser is also experiencing the same. I've added an 'OR' to the Logic Block Settings. Issue fix for Edge browser now.
edge-firefox-browser-fix.jpg
edge-firefox-browser-fix.jpg (64.04 KiB) Viewed 2102 times

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest