Estoy usando una galeria carrusel que contiene unos thumbnails, los cuales me gustaria ponerlos en blanco y negro y que luego al hacer rollover o click se cambie la img a color.
Este es el js que usando, el cual hace lo que busco pero en opacidad.
Código :
<script type="text/javascript">
$(document).ready(function () {
//jCarousel Plugin
$('#carousel').jcarousel({
vertical: true,
scroll: 1,
auto: 0,
wrap: 'last',
initCallback: mycarousel_initCallback
});
//Front page Carousel - Initial Setup
$('div#slideshow-carousel a img').css({'opacity': '0.5'});
$('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
$('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')
//Combine jCarousel with Image Display
$('div#slideshow-carousel li a').hover(
function () {
if (!$(this).has('span').length) {
$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
$(this).stop(true, true).children('img').css({'opacity': '1.0'});
}
},
function () {
$('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
$('div#slideshow-carousel li a').each(function () {
if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});
});
}
).click(function () {
$('span.arrow').remove();
$(this).append('<span class="arrow"></span>');
$('div#slideshow-main li').removeClass('active');
$('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');
return false;
});
});
</script>
Se puede asignar un css en vez de opacidad para que se cambie a blanco y negro la imagen? Me refiero a esta linea:
Código :
$('div#slideshow-carousel a img').css({'opacity': '0.5'});Gracias, saludos.
