changing thumbs from white&black to colored

[gindi]

Hi

I am adding thumbnails at the bottom of the slider and i want to use black & white thumbs which turn to colored at hover or active.

the problem is i can't do this with CSS so is there anyway to do this in the script

regards

[Mottie]

Hi Gindi!

It is totally doable with css, check out my demo here (http://jsfiddle.net/Mottie/JMgeC/412/).

Script:

$('#slider').anythingSlider({
    navigationFormatter: function() {
        return '<div class="thumb"></div>';
    }
});

CSS
The "panel1", "panel2", etc, css names are automatically generated by AnythingSlider. I also could have been more efficient and used image sprites and just change the background image position, but I was lazy ;)

/* #wrap added to increase css priority (override anythingslider.css settings) */

/* needed so the thumbnails don't get cut off */
#wrap div.anythingSlider {
    padding-bottom: 45px;
}

/* border around link (image) to show current panel */
#wrap div.anythingSlider .thumbNav a:hover,
#wrap div.anythingSlider .thumbNav a.cur {
    border-color: #d00;
}

#wrap div.anythingSlider .anythingControls {
    z-index: 100;
    height: 35px;
    opacity: 0.90;
    filter: alpha(opacity=90);
}

#wrap div.anythingSlider .thumbNav {
    display: block;
    float: left;
    margin: 0;
    z-index: 100;
}

#wrap div.anythingSlider .thumbNav li {
    display: block;
    float: left;
}

/* link around thumbnail image */
#wrap div.anythingSlider .thumbNav a {
    background: transparent;
    display: block;
    height: 30px;
    width: 30px;
    margin: 2px 4px;
    padding: 0;
    outline: 0;
}
/* Thumbnail image */
#wrap div.anythingSlider .thumbNav .thumb {
    height: 30px;
    width: 30px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: #000 1px solid;
}

/*** color images ***
http://proloser.github.com/AnythingSlider/demos/images/th-slide-xxx.jpg
*** grey scale image ***
http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-xxx/jpg
*/

/* panel 1 grey thumb */
#wrap .panel1 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-civil-1.jpg); }
/* panel 1 color thumb */
#wrap .panel1:hover .thumb, #wrap .panel1.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-civil-1.jpg); }

/* panel 2 grey thumb */
#wrap .panel2 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-env-1.jpg); }
/* panel 2 color thumb */
#wrap .panel2:hover .thumb, #wrap .panel2.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-env-1.jpg); }

/* panel 3 grey thumb */
#wrap .panel3 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-civil-2.jpg); }
/* panel 3 color thumb */
#wrap .panel3:hover .thumb, #wrap .panel3.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-civil-2.jpg); }

/* panel 4 grey thumb */
#wrap .panel4 .thumb { background-image: url(http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-env-2.jpg); }
/* panel 4 color thumb */
#wrap .panel4:hover .thumb, #wrap .panel4.cur .thumb { background-image: url(http://proloser.github.com/AnythingSlider/demos/images/th-slide-env-2.jpg); }

[gindi]

yeah m8 i know it could be done by that way but one of the most cool things about this slider is that i don't have to add the thumbnail for each image in the CSS file and i was looking for some code that i can add to the script file to make this hover effect and just type the image name (it makes it easy for large number of thumbs)

i know that sounds too lazy but i was just wondering if that is possible

anyway thanks for your support

regards

[Mottie]

Actually it is possible... http://jsfiddle.net/Mottie/JMgeC/424/

Not the most efficient code I've ever written, but it works:

$('#slider').anythingSlider({
    width: 300,
    height: 200,
    startStopped: true,
    navigationFormatter: function(i, panel) {
        var cur = 1, // set initial panel here - "activePage" hasn't been set up yet
            bk = '',
            grey = 'http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-slide-',
            color = 'http://proloser.github.com/AnythingSlider/demos/images/th-slide-';
        bk += (cur === i) ? color : grey;
        bk += ['civil-1', 'env-1', 'civil-2', 'env-2'][i-1] + '.jpg';
        return '<div class="thumb" style="background-image:url(' + bk + ')"></div>';
    },
    onSlideComplete: function(slider){
        slider.$nav.find('.thumb').each(function(i){
            var bk = $(this).css('background-image'),
                grey = 'http://i201.photobucket.com/albums/aa236/Mottie1/demo/thg-',
                color = 'http://proloser.github.com/AnythingSlider/demos/images/th-';
            if (slider.currentPage === i+1) {
                $(this).css('background-image', bk.replace(grey, color) );
            } else if (!bk.match(grey)) {
                $(this).css('background-image', bk.replace(color, grey) );
            }
        })
    }
});

[gindi]

Just Perfect m8

thanks