jQuery周期-如何在不破坏缩略图寻呼机的情况下将图像包装在span标签中? [英] Jquery cycle - How can I wrap my images in span tags without breaking the thumbnail pager?

问题描述

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

基本上，那里的小提琴显示正在发生的事情.我在图像周围使用了span标签，以启用滑块中图像下方的文本字段，以使文本随图像而变化.它可以工作，但是现在我使用缩略图作为损坏的传呼机.

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.

有没有一种方法可以使它们与span标记配合使用?

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

编辑-我正在使用我的页面的js:

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>

推荐答案

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

Slide是包括span标签的整个幻灯片对象.您需要从对象获取img标签.

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

jQuery构造函数接受第二个参数，该参数可用于覆盖选择的上下文.

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

jQuery("img", slide);

与

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

因此，对于您的脚本:

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

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

这篇关于jQuery周期-如何在不破坏缩略图寻呼机的情况下将图像包装在span标签中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！