Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

changing thumbs from white&black to colored #86

gindi opened this Issue May 17, 2011 · 4 comments


None yet
2 participants

gindi commented May 17, 2011


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



Mottie commented May 17, 2011

Hi Gindi!

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


    navigationFormatter: function() {
        return '<div class="thumb"></div>';

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 ***
*** grey scale image ***

/* 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); }

@Mottie Mottie closed this May 17, 2011

gindi commented May 17, 2011

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



Mottie commented May 17, 2011

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

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

    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){
            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 commented May 18, 2011

Just Perfect m8


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment