 |
|
|
|
|
|
 |
| ||||||||
 |
 
|
|
|
|
|
|
|
|
|
| ||||||||
|
|
| 
| User list | Rules | You are not logged in.
Hello,
This question is related to styling/modifing a standard Panotour (XML) file.
I'm using the the standard 2D-Theme Panotour (Pro) template. For a tour I enabled 'Thumbnail' (the bar, not the stack). This gives me a row of thumbnails, I've set it to 1 row. My tour got a total of 20 panorama's. Becuase of this number it's not possible to display them all in 1 row, some arrows are displayed on the side of the thumbnails. The problem I have is the alignment of these thumbnails. When I have 20 photos you initially see thumbnail numbers 7 to 13, which makes it possible to use the arrows to the left and right: the thumbnail bar is centered in the middle.
What I would like to have is that I see thumbnail 1 - 6 when the tour loads (so that I see the first thumbnail in the bar at the left, not the ones from the middle). I've been playing around with the 'align' and 'edge' settings in the tour XML file, but I can't get them to work correctly. According to the Krpano documentation it should work when I set align to right and edgde to right.
See the attatched files for how it is and how I would like it. Second images shows how the tours starts now. First image shows that the thumbnail at the left actually is the first panorama and also the one the tour starts with - this is how I'd like to see it when the tour starts.
Snippet of code I've tried to modify to my needs:
<plugin name="thumbArray" keep="true" zorder="1" url="Tourdata/graphics/transparent.png" handcursor="false" capture="false" children="true" alpha="0.9" blendmode="normal" smoothing="true" x="0" y="15%" scale="1" align="top" edge="bottom" width="prop" height="15%"/> <plugin name="thumbBgLayout" keep="true" zorder="1" url="Tourdata/graphics/transparent.png" handcursor="false" capture="false" x="0" y="0" align="center" edge="center" width="prop" height="100%" parent="thumbArray"/> <plugin name="thumbMovePrev" keep="true" zorder="3" capture="true" url="Tourdata/graphics/thumb_scroll.png" alpha="0.8" onover="set(alpha, 1);" onout="set(alpha,0.8);set(scrollspeed,10);" scrollspeed="10" onhover="moveThumbsPrev(get(scrollspeed));if(scrollspeed LT 70, inc(scrollspeed););" onclick="moveThumbsPrev(50);" x="10" y="7.5%" align="topleft" edge="left"/> <plugin name="thumbMoveNext" keep="true" zorder="3" capture="true" url="Tourdata/graphics/thumb_scroll.png" alpha="0.8" onover="set(alpha, 1);" onout="set(alpha,0.8);set(scrollspeed,10);" scrollspeed="10" onhover="moveThumbsNext(get(scrollspeed));if(scrollspeed LT 70, inc(scrollspeed););" onclick="moveThumbsNext(50);" x="10" y="7.5%" align="topright" edge="right"/> <plugin name="thumbMovePrevArrow" parent="thumbMovePrev" keep="true" zorder="3" capture="false" url="Tourdata/graphics/arrow.png" x="0" y="0" align="center" edge="center" rotate="180"/> <plugin name="thumbMoveNextArrow" parent="thumbMoveNext" keep="true" zorder="3" capture="false" url="Tourdata/graphics/arrow.png" x="0" y="0" align="center" edge="center"/ <plugin name="slide" parent="thumbArray" keep="true" zorder="0" url="Tourdata/graphics/slide.png" handcursor="false" capture="false" children="true" alpha="0.9" blendmode="normal" smoothing="true" x="0" y="0" align="bottom" edge="bottom" width="4000" height="100%" onclick="slide_action_out"/> <plugin name="strap" keep="true" zorder="0" url="Tourdata/graphics/strap.png" parent="thumbArray" alpha="0.9" align="bottom" edge="left" rotate="90" handcursor="true" onclick="slide_action_out"/> <plugin name="strapArrow" keep="true" parent="strap" zorder="0" url="Tourdata/graphics/arrow.png" align="center" edge="center" capture="false" enabled="false" rotate="180"/>
Tried to offset the x position of the thumbArray (-50%) which seemed to work in the first place, but that didn't work either (most right thumbnails were not accessible).
Does anyknow know where I could find more information about aligning thumbnails. Or maybe someone who had the same problem in the past and knows the solution?
- Jordi
Last edited by JordiM (2012-11-10 11:01:41)
Offline
Hi... I don't suppose you have tried to set the "center" to "left"
<plugin name="strapArrow" keep="true" parent="strap" zorder="0" url="Tourdata/graphics/arrow.png" align="center" edge="center" capture="false" enabled="false" rotate="180"/>
Destiny...
Offline
Destiny wrote:
Hi... I don't suppose you have tried to set the "center" to "left"
<plugin name="strapArrow" keep="true" parent="strap" zorder="0" url="Tourdata/graphics/arrow.png" align="center" edge="center" capture="false" enabled="false" rotate="180"/>
Destiny...
Thank you for the suggestion, but I've already tried center on the thumbArray (all sort of combinations left/right/center/top/bottom/etc). When I try center on strapArrow, only the arrow moves up a few pixels.
Edit: Setting align=right on the thumbBgLayout doesnt work either. It does display the first thumbnail, but in the center again. And the last X panorama's are not visible (wont slide further to the right). See image for the result
Last edited by JordiM (2012-11-10 12:49:44)
Offline
JordiM wrote:
Destiny wrote:
Hi... I don't suppose you have tried to set the "center" to "left"
<plugin name="strapArrow" keep="true" parent="strap" zorder="0" url="Tourdata/graphics/arrow.png" align="center" edge="center" capture="false" enabled="false" rotate="180"/>
Destiny...Thank you for the suggestion, but I've already tried center on the thumbArray (all sort of combinations left/right/center/top/bottom/etc). When I try center on strapArrow, only the arrow moves up a few pixels.
Do you mean something like this saying "thumbnail bar"? : http://www.360impressions.de/ArchivSchadowplatz/
If so you need to edit the xml for setting exact positions.
best, Klaus
PS: oh - i saw your picture only right now. You need to edit the proportions for the thumbs in the editor-window.
Last edited by klausesser (2012-11-10 12:52:29)
Offline
klausesser wrote:
JordiM wrote:
Destiny wrote:
Hi... I don't suppose you have tried to set the "center" to "left"
<plugin name="strapArrow" keep="true" parent="strap" zorder="0" url="Tourdata/graphics/arrow.png" align="center" edge="center" capture="false" enabled="false" rotate="180"/>
Destiny...Thank you for the suggestion, but I've already tried center on the thumbArray (all sort of combinations left/right/center/top/bottom/etc). When I try center on strapArrow, only the arrow moves up a few pixels.
Do you mean something like this saying "thumbnail bar"? : http://www.360impressions.de/ArchivSchadowplatz/
If so you need to edit the xml for setting exact positions.
best, Klaus
No sorry. With 'thumbnail bar' I only mean it's not the thumbnail stack, which is also in the extra's list. Wonderin what happens when you have about 30 thumbnails in your tour, will they also center around the middle (so you'll see thumb 15 in the center)?
Edit: No problem, added the image slightly later.
Last edited by JordiM (2012-11-10 12:53:34)
Offline
JordiM wrote:
No sorry. With 'thumbnail bar' I only mean it's not the thumbnail stack, which is also in the extra's list. Wonderin what happens when you have about 30 thumbnails in your tour, will they also center around the middle (so you'll see thumb 15 in the center)?
http://360impressions.de/TourMW.html - 15 thumbs, they´re becoming a bit small then . . . 
we decided to keep them static - but they also can be pulled out or in like in your example.
I can send you the code if you like.
best, Klaus
Last edited by klausesser (2012-11-10 13:01:12)
Offline
Ok.. I understand what you want.. I will experiment with it.. Its seems to be a logical suggestion to start a tour with the first thumbs displayed in the tour rather than defaulting to centre.. I will get back to you..
Destiny..
Offline
Destiny wrote:
Ok.. I understand what you want.. I will experiment with it.. Its seems to be a logical suggestion to start a tour with the first thumbs displayed in the tour rather than defaulting to centre.. I will get back to you..
Destiny..
Thank you, I appreciate that.
Offline
OK.. These thumbs are not linked to any pano's but you can still mouse over to scroll the thumbs.. Is this what you were requiring..???
http://members.westnet.com.au/dps/Thumb … mbnav.html
Destiny..
Offline
Destiny wrote:
OK.. These thumbs are not linked to any pano's but you can still mouse over to scroll the thumbs.. Is this what you were requiring..???
http://members.westnet.com.au/dps/Thumb … mbnav.html
Destiny..
For what I can see this is indeed the method I'm looking for.
Last edited by JordiM (2012-11-10 13:10:50)
Offline
Ok.. I will clean up the coding and email it to you in the morning, its getting late now...
Destiny..
Offline
JordiM wrote:
Edit: Setting align=right on the thumbBgLayout doesnt work either. It does display the first thumbnail, but in the center again. And the last X panorama's are not visible (wont slide further to the right).
Try this one - you can edit the order of the images to meet your demands and you can set whether it comes opened or to be opened by pulling the strap.
In the PTP editor try different settings like in the screenshot - and here also you can edit the order of the thumbs.
Best, Klaus
<action name="magnify">
tween(plugin[%1].alpha, 1.5, 0.3, easeInOutCubic);
tween(plugin[%1].scale, 1.05, 0.3, easeInOutCubic);</action>
<action name="lie">
tween(plugin[%1].alpha, 0.8, 0.3, easeInOutCubic);
tween(plugin[%1].scale, 1, 0.3, easeInOutCubic);</action>
<action name="slide_action_in">
tween(plugin[slide].y,6%,1,easeOutQuint);
set(plugin[strapArrow].rotate,180) ;
tween(plugin[thumbArray].y,6%,1,easeOutQuint, set(plugin[strap].onclick,action(slide_action_out)); );</action>
<action name="slide_action_out">
tween(plugin[slide].y,0,1,easeOutQuint);
set(plugin[strapArrow].rotate,0) ;
tween(plugin[thumbArray].y,0,1,easeOutQuint, set(plugin[strap].onclick,action(slide_action_in)); );</action>
<plugin name="slide" keep="true" zorder="0" url="MWdata/graphics/slide.png" visible="true" enabled="true" handcursor="true" capture="false" children="true" alpha="1" blendmode="normal" smoothing="true" x="0" y="0" scale="1" scale="1" align="bottom" edge="top" width="100%" height="6%" onloaded="action(slide_action_in)"/>
<plugin name="thumbArray" keep="true" zorder="0" url="MWdata/graphics/transparent.png" visible="false" enabled="true" handcursor="true" capture="false" children="true" alpha="1" blendmode="normal" smoothing="true" x="0" y="0" scale="1" align="bottom" edge="top" oy="0" ox="0" width="17%" height="6%" rotate="0"/>
<plugin name="MW0" keep="true" zorder="2" url="MWdata/MW0/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="3.61446%" y="0%" alpha="1" ondown="loadpano(MW0.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW0); " onhover="showtext(Haupteingang,DEFAULT);" onout="action(lie,MW0);"></plugin>
<plugin name="MW1" keep="true" zorder="2" url="MWdata/MW1/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="10.241%" y="0%" alpha="1" ondown="loadpano(MW1.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW1); " onhover="showtext(Eingangsbereich,DEFAULT);" onout="action(lie,MW1);"></plugin>
<plugin name="MW2" keep="true" zorder="2" url="MWdata/MW2/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="16.8675%" y="0%" alpha="1" ondown="loadpano(MW2.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW2); " onhover="showtext(Rundgang,DEFAULT);" onout="action(lie,MW2);"></plugin>
<plugin name="MW3" keep="true" zorder="2" url="MWdata/MW3/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="23.494%" y="0%" alpha="1" ondown="loadpano(MW3.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW3); " onhover="showtext(Werkstatt,DEFAULT);" onout="action(lie,MW3);"></plugin>
<plugin name="MW4" keep="true" zorder="2" url="MWdata/MW4/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="30.1205%" y="0%" alpha="1" ondown="loadpano(MW4.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW4); " onhover="showtext(Boxen,DEFAULT);" onout="action(lie,MW4);"></plugin>
<plugin name="MW5" keep="true" zorder="2" url="MWdata/MW5/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="36.747%" y="0%" alpha="1" ondown="loadpano(MW5.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW5); " onhover="showtext(Rundgang2,DEFAULT);" onout="action(lie,MW5);"></plugin>
<plugin name="MW6" keep="true" zorder="2" url="MWdata/MW6/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="43.3735%" y="0%" alpha="1" ondown="loadpano(MW6.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW6); " onhover="showtext(Forum,DEFAULT);" onout="action(lie,MW6);"></plugin>
<plugin name="MW7" keep="true" zorder="2" url="MWdata/MW7/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="50%" y="0%" alpha="1" ondown="loadpano(MW7.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW7); " onhover="showtext(Bistro,DEFAULT);" onout="action(lie,MW7);"></plugin>
<plugin name="MW8" keep="true" zorder="2" url="MWdata/MW8/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="56.6265%" y="0%" alpha="1" ondown="loadpano(MW8.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW8); " onhover="showtext(Forum2,DEFAULT);" onout="action(lie,MW8);"></plugin>
<plugin name="MW9" keep="true" zorder="2" url="MWdata/MW9/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="63.253%" y="0%" alpha="1" ondown="loadpano(MW9.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW9); " onhover="showtext(Eventhalle,DEFAULT);" onout="action(lie,MW9);"></plugin>
<plugin name="MW10" keep="true" zorder="2" url="MWdata/MW10/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="69.8795%" y="0%" alpha="1" ondown="loadpano(MW10.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW10); " onhover="showtext(Event,DEFAULT);" onout="action(lie,MW10);"></plugin>
<plugin name="MW11" keep="true" zorder="2" url="MWdata/MW11/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="76.506%" y="0%" alpha="1" ondown="loadpano(MW11.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW11); " onhover="showtext(Forum,DEFAULT);" onout="action(lie,MW11);"></plugin>
<plugin name="MW12" keep="true" zorder="2" url="MWdata/MW12/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="83.1325%" y="0%" alpha="1" ondown="loadpano(MW12.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW12); " onhover="showtext(Empore mit Restaurant,DEFAULT);" onout="action(lie,MW12);"></plugin>
<plugin name="MW13" keep="true" zorder="2" url="MWdata/MW13/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="89.759%" y="0%" alpha="1" ondown="loadpano(MW13.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW13); " onhover="showtext(Restaurant,DEFAULT);" onout="action(lie,MW13);"></plugin>
<plugin name="MW14" keep="true" zorder="2" url="MWdata/MW14/preview.jpg" parent="slide" scale="1" width="prop" height="83.3333%" align="left" edge="center" x="96.3855%" y="0%" alpha="1" ondown="loadpano(MW14.xml,NULL,NULL,BLEND(1));" onup="" onover="action(magnify,MW14); " onhover="showtext(Forum nachts,DEFAULT);" onout="action(lie,MW14);"></plugin>
</krpano>Last edited by klausesser (2012-11-10 17:18:58)
Offline
Destiny wrote:
Ok.. I will clean up the coding and email it to you in the morning, its getting late now...
Destiny..
Thank you very much. I've been looking at the virtualtour.xml file, but can't find the code I can use/modify for my tour. The functionality is the same, but it looks like I'm using a different thumbnail bar? (top, 100% width, prev/next controls). I'm not new in programming, but I'm new in the KRPano codes.
Edit:
@klausesser
Thank you for the advice, but I have to change settings which are not part of the UI in Panotour.
Last edited by JordiM (2012-11-10 22:31:03)
Offline
Hi.. I have sent you the demo thumb nav code, as seen here it is broken up into four main groups in the main xml file...
Group 1. Scrolling Thumb Nav
Group 2. Definitions of fonts allows you to change the font colour, size and type...
Group 3. Definitions of the pictures, source, names and the action to open the relevant pano...
Group 4. Actions Destiny Test Panos.... These are you panos so you will have 30 plus..
The first group provides the location of the plugin, "thumbmenu.swf". The rest of the code gives you the opportunity to edit the effects and positions etc.
You will notice that I only have only used one pano for this demo, "virtualtour0", you would have "virtualtour0 to virtualtour30>" so you will need to edit this code accordingly.
The "Actions Destiny Test Pano" are triggered by the "onclick", so since I have only have one pano here, it will keep going to the same pano..
Its all krpano code so it will work with no issues..
This setup will look like this, and as you can see I added a glow around the thumbs.. http://members.westnet.com.au/dps/Thumb … mbnav.html
Destiny..
<!--************** Scrolling Thumb Nav **********************************************************************-->
<plugin keep="true" name="thumbmenu"
url="plugins/thumbmenu.swf"
thumbs="thumbnails"
thumbcss="cssdata"
thumbwidth="130"
thumbheight="60"
thumbpadding="20"
orientation="horizontal"
effect="GlowEffect"
effectparam="6"
scrolling="constant"
scrollspeed="10"
align="top"
width="500"
height="160"
/>
<!--------- Definition of the font --------->
<data name="cssdata">
p{color:#ffffff; font-family:Arial; font-size:14; text-align:center;}
</data>
<!-- Definition of the pictures of the gallery -->
<data name="thumbnails">
<images>
<image src="images/pic1.jpg" title="[p]Destiny 1[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic2.jpg" title="[p]Destiny 2[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic3.jpg" title="[p]Destiny 3[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic4.jpg" title="[p]Destiny 4[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic5.jpg" title="[p]Destiny 5[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic6.jpg" title="[p]Destiny 6[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic7.jpg" title="[p]Destiny 7[/p]" onclick="action(virtualtour0)"/>
<image src="images/pic8.jpg" title="[p]Destiny 8[/p]" onclick="action(virtualtour0)"/>
</images>
</data>
<!---------Actions Destiny Test Panos------>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
<action name="virtualtour0">
loadpano(virtualtour0.xml);
</action>
and so on...>>
Offline
Destiny wrote:
Hi.. I have sent you the demo thumb nav code, as seen here it is broken up into four main groups in the main xml file...
Group 1. Scrolling Thumb Nav
Group 2. Definitions of fonts allows you to change the font colour, size and type...
Group 3. Definitions of the pictures, source, names and the action to open the relevant pano...
Group 4. Actions Destiny Test Panos.... These are you panos so you will have 30 plus..
The first group provides the location of the plugin, "sitemap.swf". The rest of the code gives you the opportunity to edit the effects and positions etc.
You will notice that I only have only used one pano for this demo, "virtualtour0", you would have "virtualtour0 to virtualtour30>" so you will need to edit this code accordingly.
The "Actions Destiny Test Pano" are triggered by the "onclick", so since I have only have one pano here, it will keep going to the same pano..
Its all krpano code so it will work with no issues..
This setup will look like this, and as you can see I added a glow around the thumbs.. http://members.westnet.com.au/dps/Thumb … mbnav.html
Destiny..
Thank you, I'll test it out soon today. I'll let you know if I got it working.
Edit: I checked out the authors plugin page, but I can't find anything to create the prev/next scrolling controls. Is this possible? Becuause my client already has 7 tours in the exact same style I showed earlier (but with just 2-5 pano's, so didn't had the same problem). Seems like it's a very basic plugin with no possibilities to control the scrollbehaviour with buttons instead over hover?
Last edited by JordiM (2012-11-11 10:41:42)
Offline
JordiM wrote:
@klausesser
Thank you for the advice, but I have to change settings which are not part of the UI in Panotour.
That´s why i posted the code . . .
best and good luck, Klaus
Offline
Destiny wrote:
Hi.. I have sent you the demo thumb nav code, as seen here it is broken up into four main groups in the main xml file...
Group 1. Scrolling Thumb Nav
Group 2. Definitions of fonts allows you to change the font colour, size and type...
Group 3. Definitions of the pictures, source, names and the action to open the relevant pano...
Group 4. Actions Destiny Test Panos.... These are you panos so you will have 30 plus..
Unfortunately I cannot use this code/plugin. I cannot reproduce one-on-one what I had before using this plugin (which is unacceptable for my client). Thank you anyway.
When I inculde the plugin in my existing theme (in the heading thumbnail bar) the 'center' problem occurs again.
Offline
Hi.. I get so far with testing only to find out I cannot get my interactive media working as I want them to work.. This interactive thumb test I have tried so many ways to trigger the pano into opening the xml file.., but it just won't work.. There is only one pano but it should still re-gen the pano to show its working.. Not sure of all the ways to trigger an action or all the ways to link xml files.. The more I learn the more there I seem to have to learn.. ptp is great but its stubborn too.. 
Once I find the secret, I hope to make all kinds of plug-ins..
http://members.westnet.com.au/dps/DOCte … ltour.html
Destiny..
Offline
I kind of fixed the problem:
In the 'displayThumbsScrolls' function in the tour XML i've added the following code: moveThumbsPrev(2000);
This function is a auto generated function in my XML - originally it is used when you hover over the arrow buttons to navigate left/right in the row of thumbnails. I use this same function to virtually simulate a very fast move to the previous located thumbnails. Since there is no animation going on you won't notice a flicker effect. Also, if you don't have 2000px of thumbnails it will limit itself to the very first thumbnail in the row, so you won't get a blank screen. If you have lots and lots of thumbnails, just higher this number with a few thousands, just to be sure (as mentioned, it will automatically stop when the first (or last) thumbnail is found in the row).
Offline
I would be putting your needs in for future requests.. Its seems obvious to start at thumb 1, but its not so easy to set it to this.. I played around with many options but it did not like it.. I came up with some fixes but never perfect..
Destiny..
Offline