title: jQuery Cycle with anchors and thumbnails
body: <p>I'm using the jQuery Cycle plugin to build a slideshow that the main image is wrapped in an anchor and also has the thumbnail navigation.  I basically have the same code from the <a href="http://jquery.malsup.com/cycle/pager2.html" rel="nofollow">demo page</a> of jQuery Cycle.  Once I wrapped the images in a link the thumbnails broke.  I have tried dropping the "slide.src" for <code>$('#slideshow img).attr('src')</code> but that still comes back as undefined.</p>
  
  <pre><code>$('#slideshow').before('&lt;ul id="slideshow-nav"&gt;').cycle({
   fx: 'fade',
   speed: 'slow',
   timeout: 0,
   pager: '#slideshow-nav',
  
   pagerAnchorBuilder: function(idx, slide){
   return '&lt;li class="thumbnail"&gt;&lt;a href="#"&gt;&lt;img class="rounded" src="' + slide.src + '" width="137" height="129" /&gt;&lt;/a&gt;&lt;span class="highlight"&gt;&lt;/span&gt;&lt;span class="gloss"&gt;&lt;/span&gt;&lt;/li&gt;';
   }
  });
  </code></pre>
  
  <p>And my html is this.</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
   &lt;a href="#"&gt;&lt;img src="images/gyro.jpg"  alt="Gyro"&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="images/gyro.jpg"  alt="Gyro"&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="images/gyro.jpg"  alt="Gyro"&gt;&lt;/a&gt;
   &lt;a href="#"&gt;&lt;img src="images/gyro.jpg"  alt="Gyro"&gt;&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>