Help with jQuery Cycle Plugin pager with links
(ver 2.96)
I've just started developing a project with this excellent plugin. I've looked around and found answers to most of my questions, but I still need some help. I'm displaying pictures above some pager buttons. I've figured out how to add my own text to the pager buttons but now my boss wants the the buttons AND the images to link to product pages. I can't explain it very well, so here's my
development page. and my code:
- jQuery(document).ready(function() {
- $('#slideshow').after('<div id="slideshowNav">').cycle({
- fx: 'shuffle',
- speed: 'slow',
- timeout: 2000,
- pager: '#slideshowNav',
- pagerAnchorBuilder: function(i, slide) {
- return '<a href="#">'+slide.alt+'</a>';
- }
- });
- });
- <div id="homeProductCategories">
- <div id="slideshowContainer" style="width:247px;">
- <div id="slideshow" class="slideshowPics"> <img src="images/homeItemAcrylicBakery.jpg" alt="Acrylic Bakery Cases" width="140" height="112" /> <img src="images/homeItemAcrylicFood.jpg" alt="Acrylic Food Bins" width="140" height="112" /> <img src="images/homeProductCategoryBeverage.jpg" alt="Beverage Accessory Items" width="218" height="190" /> <img src="images/homeItemOrganizer.jpg" alt="Organizers & Condiment Caddies" width="140" height="112" /> <img src="images/homeItemLiterature.jpg" alt="Literature & Sign Holders" width="140" height="112" /> <img src="images/homeItemPlastic.jpg" alt="Plastic Cleaning Products" width="140" height="112" /> <img src="images/homeItemNewProducts.jpg" alt="New Products" width="140" height="112" /> </div>
- </div>
- </div>