[SOLVED] onhover thumnail preview  

Share your tips and tricks here or get help with any Panotour 2.0 problem!
No bug reports (of any kind) in this forum!
User avatar
Octavias
Member
 
Posts: 134
Joined: Wed Dec 12, 2012 11:00 pm
Location: Brooklyn NY

[SOLVED] onhover thumnail preview

by Octavias » Sat Mar 08, 2014 1:32 am

Hi everyone,

I have been searching for a way to showcase a little preview of the next panorama when you hovering over a hotspot.

I have found this thread on krpano but can't find a way to implement in the skin.xml file since its outdated maybe?


i am trying to do this in the newest Panotour Pro 2.0 version.

So to sum it up - I am looking for a code to make a onHover function display a little thumbnail that will make.

Thanks for any suggestions in advance!

Best,

- Max

User avatar
benji33
Kolor Team
 
Posts: 3046
Joined: Tue Apr 09, 2013 10:59 am
Location: France

Re: onhover thumnail preview

by benji33 » Wed Mar 12, 2014 2:48 pm

Can be done with krpano code.

Into your hotspot <style> tag, add onhover and onout events (if not present) and into this event add a call to an action which display the thumbnail (targetId attribute of the hotspot must be added with a reference to the target scene name) into a layer of the next scene.

Sample :
Code: Select all
<hotspot name="spot1"
    style="myHotspotStyle"
    ath="176.666765" atv="-3.913044"
    targetId="pano2"
    ... />

<style name="myHotspotStyle"
    ...
    onhover="onhover_myHotspotStyle"
    onout="onout_myHotspotStyle"
    ... />

<action name="onhover_myHotspotStyle">
    ...
       <!-- get thumb url -->
   set(thumbTooltipUrl, get(scene[get(targetId)].thumburl));
   addhotspot(hotspotTooltipThumb);
   set(hotspot[hotspotTooltipThumb].url, get(thumbTooltipUrl));
   set(hotspot[hotspotTooltipThumb].ath, get(ath));
   <!-- change atv and position for thumb -->
   set(hotspot[hotspotTooltipThumb].edge, bottom);
   sub(newAtvValue, get(atv), 5);
   set(hotspot[hotspotTooltipThumb].atv, get(newAtvValue));
   <!-- define size -->
   set(hotspot[hotspotTooltipThumb].width, 200);
   set(hotspot[hotspotTooltipThumb].height, 100);
    ...
</action>

<action name="onout_myHotspotStyle">
    ...
    removehotspot(hotspotTooltipThumb);
    ...
</action>

User avatar
Octavias
Member
 
Posts: 134
Joined: Wed Dec 12, 2012 11:00 pm
Location: Brooklyn NY

Re: onhover thumnail preview

by Octavias » Fri Mar 14, 2014 2:19 pm

They Benj!

Thank you SO MUCH!

I am going to try to implement it and let you know if it worked. I have been searching so long for this code. thanks!

no avatar
tiphaine
New member
 
Posts: 7
Joined: Mon Feb 17, 2014 11:43 pm

Re: onhover thumnail preview

by tiphaine » Sat Mar 15, 2014 8:40 pm

Code: Select all
<hotspot name="spot1"
    style="myHotspotStyle"
    ath="176.666765" atv="-3.913044"
    targetId="pano2"
    ... />


I don't have that in my code. Should I add it ?
I understand it has a link with the targetid attribute: "the hotspot must be added with a reference to the target scene name" Am I right ?

I really like to add that feature but I'm kind of a noob in code :)

User avatar
benji33
Kolor Team
 
Posts: 3046
Joined: Tue Apr 09, 2013 10:59 am
Location: France

Re: onhover thumnail preview

by benji33 » Thu Mar 20, 2014 11:31 am

Yes the targetId should be the panorama ID that you can found on the (i) icon next to the panorama name into panorama properties.


Return to Using Panotour / Panotour Pro

Who is online

Users browsing this forum: No registered users and 3 guests