I'm working with NivoSlider and edited the core a bit to create an UL around the thumbnails to be able to give them better markup. With some jQuery I'm changing the alpha based on the "active" class Nivo gives the a. Now I'm wondering if I could automaticly slide the thumbnail container to the right based on lets say every 4th item, because thats the one out of view. I was thinking of doing something with the modulo operator but can't really think of a formula that would help me out here...
jQuery('#pageSlider').nivoSlider({
effect: 'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
directionNav: false, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: true, // Use thumbnails for Control Nav
afterChange: function(){ // Triggers before a slide transition
jQuery('.nivo-controlNav.nivo-thumbs-enabled ul li').each(function() {
jQuery(this).css({'opacity':'0.5'});
});
jQuery('.nivo-controlNav.nivo-thumbs-enabled ul li .nivo-control.active').parent().css({'opacity':'1'});
},
pauseTime: 5000 // How long each slide will show -- bottom for IE7 fix
});
http://imgur.com/tdInJpJ [Not enough rep for an image yet, sorry]
It took me a while, but I figured it out. And eventually I went all out and kept on adding functionality to NivoSlider. To anyone who ever runs into the same kind of problem: http://tinyurl.com/p72kbna