Jquery cycle - How can I wrap my images in span tags without breaking the thumbnail pager?

问题

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>

回答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>';
    }

回答2:

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

来源：https://stackoverflow.com/questions/11647378/jquery-cycle-how-can-i-wrap-my-images-in-span-tags-without-breaking-the-thumbn

标签

jquery

css

cycle

pager