[jQuery] jQuery Cycle pagerAnchorBuilder with Div Tags

[Zach Dunn]

I've run into a problem with building a rotating news banner which
displays both an image tag and a caption div. The structure for the
slides works like this:

<div id="headline-rotation">

        <!--start of slide-->
        <div class="headline-item">
                <img/>
                <div class="caption">
                        <h2></h2>
                        <p class="subtitle"></p>
                </div>
        </div>
       <!--end of slide-->
</div>

I would like the pagers to be thumbnails of the current slide's img
tag, much in the same way that this demo has:

http://www.malsup.com/jquery/cycle/pager2.html

I am guessing that because I am cycling through div tags instead of
images, that the "slide.src" needs some modification to target the
right element. Any help on doing this would be greatly appreciated.
Below is my last attempt.

$('#headline-rotation').before('<ul id="nav">').cycle({
            fx:'fade',
                speed:'slow',
                timeout: 4000,
                pager:'#nav',

                // callback fn that creates a thumbnail to use as pager anchor
                pagerAnchorBuilder: function(idx, slide) {
                        slide = $('#headline-rotation .headline-item 
img:eq('idx')').src
                        return '<li><a href="#"><img src="' + slide.src + '" 
width="100"
height="50" /></a></li>';
                }
        });

Thanks!