I have a slideshow built in flash that I want to mimic in jQuery. The slide show uses the images from the slideshow as the pager numbers. The problem im having is once i apply links to the slideshow images the pagerAnchorBuilder image returns an undefined for the src of the image.

Javascript -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
    }
});  
});

HTML -

<div id="slideshow" class="pics"> 
    <a href=""><img src="home_1.jpg" width="1000" height="600" /></a>
    <a href=""><img src="home_2.jpg" width="1000" height="600" /></a>
    <a href=""><img src="home_3.jpg" width="1000" height="600" /></a> 
    <a href=""><img src="home_4.jpg" width="1000" height="600" /></a> 
    <a href=""><img src="home_5.jpg" width="1000" height="600" /></a> 

</div> 

If i remove the href's from the slideshow the images in the pager show up without issues. Im not sure if this is a bug or something i need to find a fix for?

Here is the answer -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
    }

});

});

I have a slideshow built in flash that I want to mimic in jQuery. The slide show uses the images from the slideshow as the pager numbers. The problem im having is once i apply links to the slideshow images the pagerAnchorBuilder image returns an undefined for the src of the image.

Javascript -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="' + slide.src + '" width="100" height="60" /></a></li>';
    }
});  
});

HTML -

<div id="slideshow" class="pics"> 
    <a href="http://google."><img src="home_1.jpg" width="1000" height="600" /></a>
    <a href="http://google."><img src="home_2.jpg" width="1000" height="600" /></a>
    <a href="http://google."><img src="home_3.jpg" width="1000" height="600" /></a> 
    <a href="http://google."><img src="home_4.jpg" width="1000" height="600" /></a> 
    <a href="http://google."><img src="home_5.jpg" width="1000" height="600" /></a> 

</div> 

If i remove the href's from the slideshow the images in the pager show up without issues. Im not sure if this is a bug or something i need to find a fix for?

Here is the answer -

$(function() {
$('#slideshow').before('<ul id="nav">').cycle({
    fx:     'fade',
    timeout: 7000,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
      var img = $(slide).children().eq(0).attr("src");
      return '<li><a href="#"><img src="' + img + '" width="100" height="60" /></a></li>';
    }

});

});

• javascript
• jquery
• html
• cycle
• undefined

4 Answers 4

I used JQuery.find() to help find the images, and to keep the code modular enough to use with different markup:

pagerAnchorBuilder: function(idx, slide) {
    return '<li><a href="#"><img src="'
        + jQuery(slide).find('img').attr('src')
        + '" width="120" /></a></li>'; 
}

Read this may help you!

jQuery Cycle pagerAnchorBuilder

With reference to JVerstry's ment (nice one JV btw!), I got the following going just fine which uses the image and <a>link. Also the pager thumbs also show the main image alt attribute:

return '<li class="slider-thumb"><a href="'+slide.href+'" id="pager-click" title="'+slide.title+'"><img src="'+ $(slide).find('img').attr('src')+'" width="90" height="69" class="fader" /></a><p class="slide-caption">'+ $(slide).find('img').attr('alt')+'</p></li>';

Seems to be a mon problem! Check out cycle with anchors and also cycle's "slideExpr"