-
Notifications
You must be signed in to change notification settings - Fork 380
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
changing thumbs from white&black to colored #86
Comments
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 /* #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); } |
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 |
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) );
}
})
}
}); |
Just Perfect m8 thanks |
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
The text was updated successfully, but these errors were encountered: