Using JQuery Cycle, how can AnchorBuilder find the SRC of an image within a DIV?

The JQuery Cycle Plugin is awesome. For my particular install, I'd like to combine two of their examples: The thumbnail pager, and its ability to cycle DIV's instead of images.

The goal is to have a setup where you have a set of thumbnails that, when clicked, change the DIV. That DIV will contain the large image and a box with HTML (specifically, some links).

I've made a rough version of it here, with the thumbs on the lower-left, and the DIV in gray on the lower-right. The image isn't mine; I just grabbed it for the purposes of the demo:

http://i.stack.imgur.com/l49Kt.jpg

Goal: Click the thumbnail and both the large image and the text in the box change.

The thumbnails are being created by getting the slide's SRC attribute and shrinking it. Unfortunately, when the images are embedded in DIV's, the plugin can't find the SRC attribute, and so the thumbnails break.

The following is the code to build the Cycle:

<script type="text/javascript">
  $(function() {
    $('#slideshow').after('<ul id="nav">').cycle({
      fx: 'fade',
      speed:  'slow',
      timeout: 0,
      pager:  '#nav',
      pagerAnchorBuilder: function(idx, slide) {
  开发者_StackOverflow      return '<li><a href="#"><img src="' + slide.src + '" width="49" height="25" /></a></li>';
            }
        });
    });
    </script>

This works fine with the following HTML block:

<div id="slideshow" class="pics">
    <img src="/images/01_sm.jpg" class="first" title="title" height="329" />
    <img src="/images/02_sm.jpg" title="title" width="642" height="329" />
    <img src="/images/03_sm.jpg" title="title" width="642" height="329" />
</div>

But as mentioned breaks when they are encased in DIVs thus:

<div id="slideshow" class="pics">
    <div><img class="slideimg" src="/images/01_sm.jpg" class="first" title="title" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/02_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
    <div><img class="slideimg" src="/images/03_sm.jpg" title="title" width="642" height="329" /><div class="menu">foo</div></div>
</div>

So with all that established, the question becomes:

How do I replace slide.src with something that can look into the above DIVs and find the current slide's SRC?

Thanks in advance for your help. I hope that the solution will be simple enough that it can be added to the ever-expanding list of JQuery Cycle examples.

Did you try this:

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.find('img').attr('src') + '" width="49" height="25" /></a></li>';
        }

Like Vasu said ... but you have to use jQuery(slide) instead of slide:

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' +
           jQuery(slide).find('img').attr('src') +
           '" width="49" height="25" /></a></li>';
}