Cycle Plugin Image preview

Cycle Plugin Image preview

Hi

I'm trying to get an image preview in a Cycle gallery when clicking on navigation buttons like this:

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3.  
  4. $('#gallery').cycle({
  5. fx: 'fade',
  6. timeout: 0,
  7. speed: 1000,
  8. delay: -2000,
  9. pager: '#pager',
  10. next: '#next',
  11. prev: '#prev'
  12. });

  14. $('#pager a').click(function(evt) {
  16. //path to new preview
  17.   var imgPath = $('#gallery a').attr('href');
  18.    
  19.    //get reference to old preview
  20.   var oldPrev = $('#preview img'); 
  22.    //create HTML for new image
  23.   var  newPrev = $('<img src="' + imgPath +'">');
  24.  
  25. //make new image invisible
  26.   newPrev.hide();  
  27.  
  28. //add to the #photo div
  29. $('#preview').prepend(newPrev);  
  30.  
  31.   //fade in new image
  32. newPrev.fadeIn(850);  
  34.   //fade out old Prev and remove from DOM
  35.    oldPrev.fadeOut(850,function(){
  36. $(this).remove();
  37.     });
  38.  
  39. }); // end click

  43. }); // end ready()
  44. </script>
  45. </head>
  46. <body id="twoCol">
  47. <div id="container">  
  48.   <div id="contentWrap">
  49.   <div id="main">
  50.   <h1>Cycle Slideshow</h1>
  51.   <div id="controls">
  52.   <span id="prev" class="control">Previous</span>
  53.     <span id="pager"></span>
  54.     <span id="next" class="control">Next</span>
  55.     
  56.   </div>
  57.   <div id="gallery">
  58.     <div><a href="images/mid/blue.jpg"></a><img src="images/large/blue.jpg" width="400" height="300" alt="Blue"><p class="credit">Photo by Alin Nan</p></div>
  59.     <div><a href="images/mid/yellow.jpg"></a><img src="images/large/milk.jpg" width="275" height="432" alt="Milk Fruit Explosion"><p class="credit">Photo by David Kitchenham</p></div>
  60.     <div><a href="images/mid/green.jpg"></a><img src="images/large/fan.jpg" width="300" height="400" alt="Fan"><p class="credit">Photo by Jeltovski</p></div>
  61.     <div><a href="images/mid/orange.jpg"></a><img src="images/large/red.jpg" width="400" height="300" alt="Red"><p class="credit">Photo by Alin Nan</p></div>
  62.     <div><a href="images/mid/purple.jpg"></a><img src="images/large/weight.jpg" width="275" height="414" alt="Pink weight"><p class="credit">Photo by David Pattee</p></div>
  63.   </div>
  64.     
  65. <div id="preview"></div>  

  67. </div>
  68.     </div>
  69.   
  70. </div>
But I only get always the same first image => <a href="images/mid/blue.jpg"></a>
Online example is here.
What I'm doing wrong?

Any help appreciated!