Skip to content
This repository

changing thumbs from white&black to colored #86

Closed
gindi opened this Issue · 4 comments

2 participants

gindi Rob G
gindi
gindi commented

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

Rob G
Owner
Mottie commented

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); }
Rob G Mottie closed this
gindi
gindi commented

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

Rob G
Owner
Mottie commented

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
gindi commented

Just Perfect m8

thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.