Does anyone know how to achieve this fade in/out thumbnail?
http://procontent-tuurid.s3-eu-central- ... index.html
Smooth fade in/out hotspot thumbnail
Hi,
This particular hotspot and it's actions are built in CSS.
Tony
This particular hotspot and it's actions are built in CSS.
Tony
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/
Hi. Yea, I figure it is customized. I spend some time working on it and this is what I got so far. I probably didn't code it correctly because I have these jitters when mouse inside the circle area.
Testing site.
Testing site.
Last edited by duceduc on Wed Mar 06, 2019 12:41 am, edited 1 time in total.
Hi,
Looks pretty good. How are you incorporating it into the skin?
Tony
Looks pretty good. How are you incorporating it into the skin?
Tony
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/
I took the simplex_v5 skin, followed your Circular Hotspot Buttons tutorial and made some other modifications to get that double circle hotspot.
I did add the transition with .5sec. Before that it, the image was popping in fast. I worked on it some more and got the jitters to go away with some hack coding. My other issue is in mobile, when you press on the thumb, you can see the overlay image.
No. The title and description are placeholders using $ut & $ud.
The font is call Orbitron and is stored locally. This is the link, Google Webfont Helper to browse and download a font of your liking, then follow this guide, Styling With CSS to setup external css.
- Hopki
- Gnome
- Posts: 13026
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Something I would do is set the title text to permeable.
This will then allow the viewer to click and drag the pano through the text.
Regards,
Hopki
Something I would do is set the title text to permeable.
This will then allow the viewer to click and drag the pano through the text.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Thank. I have seen that checkbox, but I wasn't sure how it worked. Now I know.
Do you know how I can display the title of the next/previous node on the current page?
Last edited by duceduc on Thu Feb 28, 2019 7:02 pm, edited 1 time in total.
- Hopki
- Gnome
- Posts: 13026
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Hi,
Just use the insert placeholder button found under the text entry box.
Select: Node => Next Node ID for the next buttons text box, then Previous Node ID for the pre button text box.
$(next) and $(prev)
Regards,
Hopki
Just use the insert placeholder button found under the text entry box.
Select: Node => Next Node ID for the next buttons text box, then Previous Node ID for the pre button text box.
$(next) and $(prev)
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
- Hopki
- Gnome
- Posts: 13026
- Joined: Thu Jan 10, 2008 3:16 pm
- Location: Layer de la Haye, Essex UK
- Contact:
Ahh, yes, that's right it only shows node numbers.
What you can do is manually add the next and previous names in the nodes user data.
Example:
Node1, in the user data Source text field enter Pano Two and then in the Information text field enter Pano Three.
The text boxes would have the placeholders Next = $(us) , Prevouis = $(ui)
There is also a way to display preview images for the next and previous buttons.
How:
Open a skin and add a Node Image inside a Cloner and hide it.
I set the size of the Node Image to 80 x 60px in the attached project.
In the example I have given the cloner the ID: image, I have also set the type to jpeg.
On publish this will create all the thumbnails in the images folder with the IDs: image_node1.jpg, image_node2.jpg and so on.
In the skin you now add an External Loader and make it 80 x 60px. I left its ID to External 1 but you can change it.
Deselect visible but give it a visible logic block that says mouse over parent equals true, visible true.
In the Next Button you need to add a couple of actions, the first is:
Source: Mouse Enter
Action: Set Value
Value: images/image_$(next).jpg
Target: External 1
The other is:
Source: Mouse Click
Action: Set Value
Value: images/image_$(next).jpg
Target: External 1
For the Previous Buttons add:
Source: Mouse Enter
Action: Set Value
Value: images/image_$(prev).jpg
Target: External 1
The other is:
Source: Mouse Click
Action: Set Value
Value: images/image_$(prev).jpg
Target: External 1
What you could also do is Photoshop the title in the Node Image, you would remove the Cloner and Node Image elements from the skin so the project did not overwrite them.
Regards,
Hopki
What you can do is manually add the next and previous names in the nodes user data.
Example:
Node1, in the user data Source text field enter Pano Two and then in the Information text field enter Pano Three.
The text boxes would have the placeholders Next = $(us) , Prevouis = $(ui)
There is also a way to display preview images for the next and previous buttons.
How:
Open a skin and add a Node Image inside a Cloner and hide it.
I set the size of the Node Image to 80 x 60px in the attached project.
In the example I have given the cloner the ID: image, I have also set the type to jpeg.
On publish this will create all the thumbnails in the images folder with the IDs: image_node1.jpg, image_node2.jpg and so on.
In the skin you now add an External Loader and make it 80 x 60px. I left its ID to External 1 but you can change it.
Deselect visible but give it a visible logic block that says mouse over parent equals true, visible true.
In the Next Button you need to add a couple of actions, the first is:
Source: Mouse Enter
Action: Set Value
Value: images/image_$(next).jpg
Target: External 1
The other is:
Source: Mouse Click
Action: Set Value
Value: images/image_$(next).jpg
Target: External 1
For the Previous Buttons add:
Source: Mouse Enter
Action: Set Value
Value: images/image_$(prev).jpg
Target: External 1
The other is:
Source: Mouse Click
Action: Set Value
Value: images/image_$(prev).jpg
Target: External 1
What you could also do is Photoshop the title in the Node Image, you would remove the Cloner and Node Image elements from the skin so the project did not overwrite them.
Regards,
Hopki
- Attachments
-
- next_prev.zip
- (37.99 KiB) Downloaded 209 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/