jQuery Cycle - img slide not loaded, requeuing slideshow

Question

I'm using jQuery Cycle plugin to create a very simple slideshow:

Markup:

<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 -->

Script:

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 is function that creates thumbnails in the pager (.thumbs in my example). The idea is that thumbnails are created in .thumbs and .slides is the wrapper for slides (images in my case).

However, I'm getting this in log in the console (not error or warning, just log):

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

The slideshow still works, but it doesn't create the thumbnails, telling me the img variable from the pagerAnchorBuilder function is undefined.

Any idea what the "requeuing slideshow" mean and why the image is undefined? I used this exact snippet many many times in the past, and never had this problem before.

Answer 1

Hmm ...

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

If the "slide" passed in to your "pagerAnchorBuilder" callback will be one of the <img> elements in the "slides" <div>, then you don't need the "find()". It should be just:

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

or, simpler:

    var img = slide.src;

The ".find()" method won't ever include the starting element; it only looks at descendants in the DOM.