Slide menus

Tim2420

I have seen a few pano tours with the slide menu or toggle does anybody have any creative flare that they can share with me,its a steep learning curve but we will concour with a little help

Shanti

what do you mean by slide menu? can you post one of those websites?

Graydon

I think it's also called an accordion menu

Graydon

http://marlincreek.com/demo/slide/slide1.html

If so, then xml and sample image is attached.

slide1.xml

And here's the code... cleared of my logo

Code

<krpano version="1.0.8">


	<plugin name="slide1"
		url="slide1.png"
		keep="true"
		visible="true"
		enabled="true"
		handcursor="true"
		capture="true"
		children="true"
		zorder="1"
		alpha="1.00"
		blendmode="normal"
		smoothing="true"
		align="left"
		edge="right"
		x="0" y="0"
		ox="25" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		scale9grid=""
		crop=""
		mask=""
		onloaded=""
		onover="action(slide_action_1_in);"
		onhover=""
		onout="action(slide_action_1_out);"
		ondown=""
		onup=""
		onclick=""
	/>


	<action name="slide_action_1_in">
		tween(plugin[slide1].x,500,distance(500,3),linear);
	</action>


	<action name="slide_action_1_out">
		tween(plugin[slide1].x,0,distance(500,3),linear);
	</action>
	
</krpano>

Alles anzeigen

Graydon

Shanti

ahh, Now I understand!

Graydon you are quickly becoming the Krpano master ! :D

JDB

Is it possible to use this accordion menu as a map?

If so how would someone go about adding the spots?

Graydon

JDB - yes, you can setup a map to slide in / out like the menu sample shown.

If you use the google map plugin (commercial) the spots / radar are added within the xml code as sub-nodes... it's best to look at the samples and information here... http://www.krpano.com/plugins/googlemaps/

You can also include "images" as maps... i.e. floor plans, land plots, etc... An online sample is here... http://www.krpano.com/examples/vtour/ (look at the very last one). The same "tour" is documented in the 1.0.7 download package... look in examples --> tours

If you look through the options / samples and need some additional help... just let us know.

JDB

Thanks for the reply Graydon.

I have bought and used the Google Map plugin before but I cannot seem to get it to work in this case. I have also tried to use the method demonstrated in the tour example but again I come up short. If it isn't to much of a bother could you post a snippet showing how this needs to be setup wit the accordian?

Graydon

I can do that... hopefully over the weekend.

Just to make sure we are talking about the same thing...

... You want the google map plugin to slide in / out like the sample I posted before?

like this?
http://marlincreek.com/demo/slide/slide1.html

Graydon

Graydon

I played with this some and seem to be having an issue when assigning the googlemap plugin to a parent.

Map works and all... but as soon as I setup parent="pluginx", the map disappears and just the krpano.com logo shows... see attached.

JDB

Well thank you for the time spent, did you by chance try using it as a standard image map, like in the tour example? I can't get it to work like that either.

JDB

I think I have it figured out, the image method anyway. I'll try to get it fixed tomorrow evening and post the solution tomorrow night.

Graydon

Glad you got it working.

I had the basic slide in/out functioning as I was trying to figure out the parent / child issue...

Here's where I left it... http://marlincreek.com/demo/slide_map/slide.html (maps on the right edge)

... but that's just an interim step in getting it how I wanted it to work.

JDB

Ok I have figured out part of my problem. When I first started testing I was working inside a pano but I then moved to a blank cube. I have it working now in a blank cube but when I put a pano behind it my map spots dont show up! Any ideas what might casue this? Here is the code I have working

Code

<krpano version="1.0.7" onstart="action(hidespots);">
	<!-- preview pano -->	<preview type="grid(cube,32,32,256,0x888800,0x000044,0xFFFFFF);" details="8" />
	<!-- lensflares -->


	<!-- change the default textstyle for showtext: -->	<textstyle name="DEFAULT" font="Arial" fontsize="12" textcolor="0xFFFFFF" border="false" background="false" effect="glow(0x000000,0.7,4,2);dropshadow(4,45,0x000000,4,1);" />
		<plugin name="spot0" url="mappoint.png" zorder="2" align="topleft" edge="center"   x="25" y="500" onhover="showtext(Move Here);"         onclick="loadpano(tour0.xml,NULL,MERGE,BLEND(1));" />    <plugin name="spot1" url="mappoint.png" zorder="2" align="topleft" edge="center"   x="649" y="275" onhover="showtext(Move Here);"     onclick="loadpano(tour1.xml,NULL,MERGE,BLEND(1));" />    <plugin name="spot2" url="mappoint.png" zorder="2" align="topleft" edge="center"   x="686" y="300" onhover="showtext(Move Here);" onclick="loadpano(tour2.xml,NULL,MERGE,BLEND(1));" />    <plugin name="spot3" url="mappoint.png" zorder="2" align="topleft" edge="center"   x="748" y="250" onhover="showtext(Move Here);"        onclick="loadpano(tour3.xml,NULL,MERGE,BLEND(1));" />		<plugin name="map"		url="map-blank.png"		keep="true"		visible="true"		enabled="true"		handcursor="false"		capture="true"		children="true" 		zorder="0"		alpha="1"		blendmode="normal"		smoothing="true"		align="left"		edge="right"		x="50" y="0"		ox="50" oy="0"		rotate="0"		width="975" height="803"		scale="1"		scale9grid=""		crop=""		mask=""		onloaded=""		onover="action(slide_action_1_in);"		onhover="showtext(Click to Hide Map)"		onout=""		ondown=""		onup=""		onclick="action(slide_action_1_out);"	/>	<action name="slide_action_1_in">				tween(plugin[map].x,975,distance(950,1),linear);		action(showspots);	</action>
	<action name="slide_action_1_out">		action(hidespots);		tween(plugin[map].x,50,distance(500,1),linear);	</action>			<action name="showspots">  		set(plugin[spot0].alpha,0);    	set(plugin[spot1].alpha,0);    	set(plugin[spot2].alpha,0);    	set(plugin[spot3].alpha,0);
  		    	set(plugin[spot0].visible,true);    	set(plugin[spot1].visible,true);    	set(plugin[spot2].visible,true);    	set(plugin[spot3].visible,true);
        tween(plugin[spot0].alpha,1);    	tween(plugin[spot1].alpha,1);    	tween(plugin[spot2].alpha,1);    	tween(plugin[spot3].alpha,1);
    </action>		 <action name="hidespots">    	set(plugin[spot0].visible,false);    	set(plugin[spot1].visible,false);    	set(plugin[spot2].visible,false);    	set(plugin[spot3].visible,false);
    </action>
</krpano>

Alles anzeigen

Zitat

klaus.krpano

Hi,

set keep="true" also for your spots,
maybe this is the problem in your case...

best regards,
Klaus

JDB

Zitat von klaus.krpano

Hi,
set keep="true" also for your spots,
maybe this is the problem in your case...
best regards,
Klaus

Thanks Klaus, that fixed my issue.
You have a great piece of software!

Phil

I have the slider working but it moves a little too slow. How do I double the speed?

Here's the code I'm using.

Code

<plugin name="slide1"
		url="images/vslider_500px.png"
		keep="true"
		visible="true"
		enabled="true"
		handcursor="true"
		capture="true"
		children="true"
		zorder="1"
		alpha="1.00"
		blendmode="normal"
		smoothing="true"
		align="left"
		edge="right"
		x="0" y="0"
		ox="40" oy="0"
		rotate="0"
		width="" height=""
		scale="1"
		scale9grid=""
		crop=""
		mask=""
		onloaded=""
		onover="action(slide_action_1_in);"
		onhover=""
		onout="action(slide_action_1_out);"
		ondown=""
		onup=""
		onclick=""
	/>


	<action name="slide_action_1_in">
		tween(plugin[slide1].x,190,distance(500,3),linear);
	</action>


	<action name="slide_action_1_out">
		tween(plugin[slide1].x,0,distance(500,3),linear);
	</action>

Alles anzeigen

Thanks,
Phil

Phil

Why is it easy to find the answer immediately on my own after posting the question?

The 3 in this line of code indicates the speed. The lower the number the faster the movement.

Code

tween(plugin[slide1].x,190,distance(500,3),linear);

Phil

Graydon

change the parameters...

Code

distance(500,3)

to...

Code

distance(500,1.5)

or some other appropriate combination.

Some more information can be found here

To make it simpler to understand you should actually set it up like...

Code

distance(190,##)

... since you are tweening a total distance of 190... and then the ## will make more sense as it's the total amount of time you would want your slide to take to go the entire distance.

Graydon

Zitat von Phil

Why is it easy to find the find the answer on my own after posting the question?

It's a universal law of forums I believe... happens to me all the time.

So does posting an answer while someone else posts one as well.

Jetzt mitmachen!