javascript - jQuery Cycle - 未加载 img 幻灯片，正在重新排队幻灯片

Question

我正在使用 jQuery Cycle 插件创建一个非常简单的幻灯片:

标记:

<div class="gallery group">

    <div class="slide-nav">
        <a href="#" class="previous">&laquo; Ver anterior</a>
        <a href="#" class="view">Ver Ficha</a>
        <a href="#" class="next">Ver siguiente &raquo;</a>
    </div><!-- /slide-nav -->

    <div class="slider">

        <div class="slides">
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
            <img src="img/gallery01.jpg" alt="" />
            <img src="img/gallery02.jpg" alt="" />
        </div>

        <div class="thumbs"></div>

    </div><!-- /slider -->

</div><!-- /gallery -->

脚本:

jQuery('.gallery .slider .slides').cycle({ 
    fx:     'fade', 
    speed:  '800', 
    timeout: 3000, 
    prev:   '.gallery .slide-nav a.previous',
    next:   '.gallery .slide-nav a.next',
    pager:  '.gallery .slider .thumbs',

    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) {
        var img = jQuery(slide).find("img").attr("src");
        return '<a href="#"><img src="' + img + '" /></a>';
    } 
});

pagerAnchorBuilder 是在 pager 中创建缩略图的函数(在我的示例中为 .thumbs)。这个想法是缩略图是在 .thumbs 中创建的，而 .slides 是幻灯片的包装器(在我的例子中是图像)。

但是，我在控制台的日志中得到了这个(不是错误或警告，只是日志):

[cycle] 1 - img slide not loaded, requeuing slideshow: gallery01.jpg 0 0

幻灯片仍然有效，但它不创建缩略图，告诉我 pagerAnchorBuilder 函数中的 img 变量未定义。

知道“requeuing slideshow”是什么意思以及为什么图像未定义吗？我过去多次使用过这个确切的片段，以前从未遇到过这个问题。

Answer 1

嗯...

    var img = jQuery(slide).find("img").attr("src");

如果传入“pagerAnchorBuilder”回调的“幻灯片”将是 <img> 之一“幻灯片”中的元素 <div> ，那么您就不需要“find()”。它应该只是:

    var img = jQuery(slide).attr('src');

或者，更简单:

    var img = slide.src;

“.find()”方法永远不会包含起始元素；它只查看 DOM 中的后代。