title: newbie help with jquery imagecube
body: <p>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.</p>
  
  <p>I work on this ImageCube <a href="http://keith-wood.name/imageCube.html" rel="nofollow">http://keith-wood.name/imageCube.html</a> but I would like to make it like this one <a href="http://www.cancan.ro/" rel="nofollow">http://www.cancan.ro/</a> with thumbscroller.</p>
  
  <p>I know to make this things work only like this so if you know a better way to do it just tell me.</p>
  
  <p>Whatever values do I put either in <em>html</em> or <em>javascript</em> can't seems to work like it should.
  For example in the case from below all <em>thumbs</em>  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 on whichever of the <em>thumbs</em>  the Cube repeatedly rotate the Uluru image.</p>
  
  <p>So how can I assign the coresponding value to each thumb <em>img id</em> in order to function like a thumbscroller?</p>
  
  <p>I also received this answer from the author </p>
  
  <blockquote>
    <p>You can use the <em>afterRotate</em> callback
    to be notified when the cube rotates
    and can then update the pointer in the
    list of thumbnails. You can use the
    <em>'rotate'</em> 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.</p>
  </blockquote>
  
  <p>I can't seem to find how to use <em>afterRotate</em> callback and to update the pointer.</p>
  
  <p>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. </p>
  
  <p>Here's my code</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="directionCube" class="cube"&gt;
  
              &lt;img src="img/uluru.jpg" &gt;
              &lt;img src="img/islands.jpg" &gt;
              &lt;img src="img/gorge.jpg" &gt;
          &lt;/div&gt;
  
  
  
  
              &lt;input id="direction" value="left" type="hidden"&gt; &lt;input id="current" option value='0' type="hidden" /&gt; &lt;img id="thumb1" src="1_thumb.jpg"&gt;
  
            &lt;script type="text/javascript"&gt;
          $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});
  
          $('#thumb1').click(function() {
              var cube = $('#directionCube');
              var current = parseInt($('#current') .val(), 10);
              cube.imagecube('change', {direction:$('#direction') .val()}).
                  imagecube('rotate', current, function() {
                      $('#current').text($(cube.imagecube('next')).attr('title'));
                  });
          });
  
          &lt;/script&gt;
  
  
         &lt;input id="direction" value="left" type="hidden"&gt; &lt;input id="current"  option value='1' type="hidden" &gt;&lt;img id="thumb2" src="2_thumb.jpg"&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});
  
          $('#thumb2').click(function() {
              var cube = $('#directionCube');
              var current = parseInt($('#current') .val(), 10);
              cube.imagecube('change', {direction:$('#direction') .val()}).
                  imagecube('rotate', current, function() {
                      $('#current').text($(cube.imagecube('current')).attr('title'));
                  });
          });     
  
          &lt;/script&gt;
  
  
       &lt;input id="direction" value="left" type="hidden"&gt; &lt;input id="current"  option value='2' type="hidden" &gt;&lt;img id="thumb3" src="3_thumb.jpg"&gt;
  
      &lt;script type="text/javascript"&gt;
          $('#directionCube').imagecube({direction: 'up', repeat: true, pause: 3000, shading: true});
  
          $('#thumb3').click(function() {
              var cube = $('#directionCube');
              var current = parseInt($('#current') .val(), 10);
              cube.imagecube('change', {direction:$('#direction') .val()}).
                  imagecube('rotate', current, function() {
                      $('#current').text($(cube.imagecube('current')).attr('title'));
                  });
          });     
  
          &lt;/script&gt;
  </code></pre>