Question

I am using the Cycle plugin for JQuery to create a banner rotator with the pauseOnHover functionality. I have it working properly and even have the pageAnchorBuilder working correctly so that it displays an image vs ‘1,2,3, etc. The problem is it can’t find the images because I am not using images as the selector but divs.

How can I change the following code to let me specify which unique image to display for each slide (div)? When I place the image url (../images/tab.png) in the img src tag it displays a broken link. Even if that was to work it would not accomplish what I am trying to do, display a unique image per div.

I am trying to create a javascript version of something like this: http://www.bazaarvoice.com

Here is my code:

banner.js

$(document).ready(function() {
    $('.slideshow').cycle({
        speed:      200,
        timeout:    15000, 
        pager:      '#tabs',
        pagerEvent: 'mouseover',
        pauseOnPagerHover: true,
        pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    return '<a href="path-to-link"><img src="' + slide.src + '" height="47" width="189" /></a>';
}


    });
});

Answer 1

I think you have the wrong idea of what the pagerAnchorBuilder function actually is. You should already have the elements in the DOM and be returning the JQUERY SELECTOR for those elements, which corresponds to each of the slides (usually by the index passed to the function). View one of the demos here. It may help you get a better understanding of what’s going on there.

If you’re trying to build a cycle that scrolls through anchors, you have to do nothing more than include your anchor HTML markup inside the (presumably) div.slidehow:

<div class="slideshow">
   <a href="path-to-link1"><img src="/images/src1.png" height="47" width="189" /></a>
   <a href="path-to-link2"><img src="/images/src2.png" height="47" width="189" /></a>
</div>

and the Cycle Plugin will do it for you. There are some limitations to using images inside anchors with this plugin, though.