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">« Ver anterior</a>
<a href="#" class="view">Ver Ficha</a>
<a href="#" class="next">Ver siguiente »</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.
精彩评论