Smooth fade in/out hotspot thumbnail

[duceduc]

Does anyone know how to achieve this fade in/out thumbnail?
http://procontent-tuurid.s3-eu-central- ... index.html

[Tony]

Hi,

This particular hotspot and it's actions are built in CSS.

Tony

[duceduc]

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.

[Tony]

Hi,

Looks pretty good. How are you incorporating it into the skin?

Tony

[duceduc]

I took the simplex_v5 skin, followed your Circular Hotspot Buttons tutorial and made some other modifications to get that double circle hotspot.

[Dinesh]

Hi. I think if you enable transitions and give it a time of .500 seconds, you'll get that smooth enlargement.

Are you creating your title "Gundam Cafe and Shop" externally and bringing it in as a PNG?

D.

[duceduc]

Hi. I think if you enable transitions and give it a time of .500 seconds, you'll get that smooth enlargement.

Are you creating your title "Gundam Cafe and Shop" externally and bringing it in as a PNG?

D.

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.

[Dinesh]

Strange. I'm able to get that smooth motion just fine. Will try and upload a test page.

Placeholders? Ok, but how do you get that font? Thanks for your answers.

[duceduc]

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]

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

[duceduc]

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

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?

[Hopki]

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

[duceduc]

$(next)
$(prev)
That is strange I have tried adding those placeholders, but it only displays 'node1', 'node2', 'node3' and not the title name. You can view it from the text link above.

[Hopki]

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