Hy I'm new here and new to everything that's related to webdesign and coding so maybe I have silly questions but that's it!,and also sorry for my english - hope you will understand what I have to say.


I work on this ImageCube http://keith-wood.name/imageCube.html but I would like to make it like this one http://www.cancan.ro/ with previous/next buttons and with thumbscroller.

I succeeded to make both previous/next buttons and the thumbscroller to work somehow but I can only make them functioning properly one at a time - I can't make them to function properly both in the same time.
I know to make this things work only like this so if you know a better way to do it just tell me.

Whatever values do I put either in html or javascript can't seems to work like it should.
For example in this case like in below all thumbs and both directionButtons get the first value from document in this case "0" which is uluru.jpg.So,in another words (in this case from below) whenever I click either on whichever of the thumbs or on whichever of the directionButtons the Cube repeatedly rotate the Uluru image.

I tried all kinds of variants -to put different values but in neither cases don't work well.

I also received this answer from the author
You can use the afterRotate callback to be notified when the cube rotates and can then update the pointer in the list of thumbnails. You can use the 'rotate' command to turn the cube on demand for the previous/next buttons, and for clicking on a thumbnail to show that image. See the examples on the Web site for sample code.

So if you can help me I would much appreciate it,and if you have other ideas please give me the entire code because like I said I'm very new to all in this field.

Here's my code

Code:
<div id="directionCube" class="cube">

			<img src="img/uluru.jpg" >
			<img src="img/islands.jpg" >
			<img src="img/gorge.jpg" >
		</div>
   
          <div id="thumbs">
            	<input id="direction" value="left" type="hidden"> <input id="next" value="0" type="hidden" /> <img src="1_thumb.jpg">
               <input id="direction" value="left" type="hidden"> <input id="next" value="1" type="hidden" /> <img src="2_thumb.jpg">
               <input id="direction" value="left" type="hidden"> <input id="next" value="2" type="hidden" /> <img src="3_thumb.jpg">
              </div>

<script type="text/javascript">
		$('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});

		$('#thumbs').click(function() {
			var cube = $('#directionCube');
			var next = parseInt($('#next') .val(), 10);
			cube.imagecube('change', {direction: $('#direction') .val()}).
				imagecube('rotate', next, function() {
					$('#current').text($(cube.imagecube('current')).attr('title'));
				});
		});
		
		</script>
        
             
                <input id="direction" value="right" type="hidden"> <input id="next" value="" type="hidden"> 
<img id="directionButtonRIGHT" src="control_right.jpg">

<script type="text/javascript">
		$('#directionButtonRIGHT').click(function() {
			var cube = $('#directionCube');
			var next = parseInt($('#next').val(), 10);
			cube.imagecube('change', {direction: 'right' , selection: 'forward'}).
				imagecube('rotate', next, function() {
					$('#current').text($(cube.imagecube('current')).attr('title'));
				});
		});
		
		</script>
        
        
        <input id="direction" value="right" type="hidden"> <input id="next" value="" type="hidden"> 
        <img id="directionButtonLEFT" src="control_left.jpg">
        
     <script type="text/javascript">     
            $('#directionButtonLEFT').click(function() {
			var cube = $('#directionCube');
			var next = parseInt($('#next').val(), 10);
			cube.imagecube('change', {direction: 'left', selection: 'backward'}).
				imagecube('rotate', next, function() {
					$('#current').text($(cube.imagecube('current')).attr('title'));
				});
		});
		
		</script>