Question

I’ve recently discovered the jQuery cycle option that I would like to use for a transition slider on a website I’m working on. I’ve gone through the different demos on the cycle website and found one that uses the pageAnchorBuilder option. The code is here for the script:

$(document).ready(function () {
$('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 2000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>'; 
            }
    });
});

This code works as it is intended to displaying thumbnails for the navigation list items. However I don’t want to use thumbnails from the slide.src for the navigation list item image. I would like to use an arbitrary image (such as a button.png) for the list items that changes when the list item is given ‘class=activeSlide’ to another arbitrary image (such as button-hover.png).

Answer 1

I discovered an answer. Although it does feel like a bit of a hack and probably could be done in a more semantic way, it does achieve the effect I was looking for. Anyways the script was changed to:

$(document).ready(function () {
    $('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 4000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"></li>'; 
            }
    });
});

The change was in what gets entered inbetween the <li> tags. The switch was from:

return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>';

to:

return '<li class="slide"></li>'; 

The inserted image is stripped from the tag. To achieve the affect the css must be changed to:

li.slide  {
    display: inline-block;
    width: 10px;
    height: 10px
    background-image: url("button.png");
    background-repeat: no-repeat;
    background-position: center center;
}

li.slide.activeSlide {
    background-image: url("button-hover.png");
}

The css of the <li> is actively changed to include the class activeSlide to the corresponding <li>. Therefore by styling the li.slide.act in the css you can override the css of the li.slide to achieve the affect.