开发者

jQuery Cycle - img slide not loaded, requeuing slideshow

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 snippe开发者_高级运维t many many times in the past, and never had this problem before.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜