Jquery cycle - How can I wrap my images in span ta

Question

http://jsfiddle.net/2gktS/21/

essentially the jfiddle there displays what is happening. I used span tags around the images to enable a text field, beneath the images in the slider, to get the text to change with the image. It works, but now I'm using thumbnails as the pager it has broken.

Is there a way to get them working with the span tags in place??

EDIT- the js I'm using my page:

<script type="text/javascript">
$(document).ready(function() {

$('.slideshow')

.cycle({
    fx: 'fade', speed:  2500, pause:   1, next:   '#next', 
prev:   '#prev',  pager:  '#pagernav',
// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
   return '<a href="#"><img src="' + $(slide).attr('rel') + '" width="50" height="26" /></a>'; 
}


});


$('#pauseButton').click(function() { 
$('.slideshow').cycle('pause'); 

});

$('#resumeButton').click(function() { 
$('.slideshow').cycle('resume'); 

});

});
</script>

Answer 1

http://jsfiddle.net/2gktS/25/

Slide is entire slide object including the span tag. You need to get the img tag from the object.

The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.

jQuery("img", slide);

is the same as

jQuery(slide).find("img");

So for your script:

pagerAnchorBuilder: function(i, slide) {
        var src = $("img", slide).attr("rel");

        return '<a href="#"><img src="' + src + '" width="50" height="50" /></a>';
    }

Answer 2

Try using Flow Slider, its super easy, works with pretty much any inner HTML code.