Подружить два скрипта (скроллер+скрипт эффекта при наведении)

[Che]

Есть сайт на вордпресс. http://tinyurl.com/9ux3k83
Прикручен scroller.js.

Нужно, чтобы большие изображения показывались черно-белыми, а при наведении в цвете. Нашел вот это: http://www.coolwebmasters.com/tips-a...age-hover.html

При добавлении кода в scroller.js картинки показываются черно-белыми, при наведении - цветными, но при отводе курсора остаются в цвете, а нужно чтобы возвращались опять в черно-белые...Кроме того плюсик и описание, которое показывается при наведении не нужны...

Скорее всего что-то не так с данным кодом:

// Fade image
        $('.item-overflow img').mouseover(function(){
           $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
        })
        $('.attachment-slider-post-thumbnail wp-post-image').mouseout(function(){
           $(this).stop().animate({opacity:0}, 1000);
			
        });
    });

Пытаюсь поправить, но не получается.
На данный момент при загрузке сайта фото в скроллере черно-белые. При наведении появляется плюсик и фото темнеет (это вообще не нужно, а нужно, чтобы фото становилось цветным) после отвода курсора фото остается цветным, а не становится снова черно-белым...

[LittlePony]

$('.attachment-slider-post-thumbnail wp-post-image')

самая обыкновенная невнимательность.
элемента wp-post-image не существует.

[Che]

Смотрю код страницы firebug'om:

<div class="img_wrapper" style="display: inline-block; width: 234px; height: 309px;">
<img class="attachment-slider-post-thumbnail wp-post-image" width="310" height="407" title="slide11" alt="slide11" src="http://site.ru/wp-content/uploads/2011/07/slide11-310x407.jpg" style="position: absolute; z-index: 998; opacity: 1;">
<img class="attachment-slider-post-thumbnail wp-post-image" width="310" height="407" title="slide11" alt="slide11" src="data:image/png;base64,iVBORw0KGgoAAA..." style="position: absolute; opacity: 1;">
</div>

[Deff]

Che, Попробуйте так

// Fade image
$('div.img_wrapper').mouseenter(function(){
        $('div.img_wrapper').mouseenter(function(){
           $(this).find('img:first').stop().animate({opacity:1}, 1000);
           
         }).mouseleave(function(){
           $(this).find('img:first').stop().animate({opacity:0}, 1000);
			
        });

Скрипт должен запускаться после саnvas обработки

[Che]

При отводе курсора все равно фото остается цветным.

scroler.js:

$(document).ready(function(){

	$(window).bind("load", function() {
																	
 	var $scrollPane = $( "#scroller" );
	var $scroller   = $( "#scroller div.scroll_container" );
	var $slider     = $( "#slider" );
	var $items		= $( '#scroller div.item' ).length;
	var $thumbs 	= $( '#scroller_thumbnails' );

	if ( $scrollPane.size() > 0 ){		
	
		$scroller.css({ opacity : 0, visibility: 'visible', marginLeft: 0 });
			
			var $new_width = 0;
			
			$('#scroller div.item').each(function(){ 
												  
				var $_img = $(this).find('.item-overflow img');
												  
				$(this).find('.item-caption').css({ opacity : 0 });
				
				$(this).width( $_img.width() );
				
				$new_width = $new_width + $(this).outerWidth(true);
				
			}).hover(
				
				function(){					
					$(this).find('img').stop().animate({ opacity : 0.2 });
					$(this).stop().animate({ opacity : 1, top : -10 });
					$(this).find('.item-caption').stop().animate({ opacity : 1 });
				},
				
				function(){ 
					$(this).find('img').stop().animate({ opacity : 1 });
					
					if( !$(this).hasClass( 'ui-tabs-hide' ) ){
						$(this).stop().animate({ opacity : 1, top: 0 });
					}
					
					$(this).find('.item-caption').stop().animate({ opacity : 0 });
				}
			);
			
			$scroller.width( $new_width );
			
			$scroller.parent().animate({ height: $('#scroller div.item').outerHeight(true) }, 500, function(){

				$scrollPane.css({ backgroundImage : 'none' });
			
				$scroller.animate({ opacity: 1 }, 750, function(){
				});
			})	
			
			var $initValue 	= $( "#scroller div.item" ).size() / 2 ;
			var $firstElem  = $( "#scroller div.item" ).eq( $initValue );
			
			$i = $initValue;
			
			$margin = 0;
			
			while($i >= 0){
				var $cur_item = $( '#scroller div.item' ).eq($i);
				$margin =  $margin + $cur_item.outerWidth(true);
				$i--;
			}			
			
			$scroller.css({ marginLeft: -$margin  + $(window).width() / 2 + $( '#scroller div.item' ).eq( $initValue ).outerWidth( true ) / 2 });		
	}


	var $tabs = $scroller.tabs({
							   
		select: function( event, ui ) {			
			
			$slider.slider( "value", ui.index );
			
			$i = ui.index;
			
			$margin = 0;
			
			while($i >= 0){
				var $cur_item = $( '#scroller div.item' ).eq($i);
				$margin =  $margin + $cur_item.outerWidth(true);
				$i--;
			}
							
			$scroller.stop().animate({ 
				marginLeft: -$margin  + $(window).width() / 2 + $( '#scroller div.item' ).eq( ui.index ).outerWidth( true ) / 2 
				}, {
					duration: 1000,
					specialEasing: { 
						marginLeft: "easeInOutCirc" 
					},
					complete: function() {
						$('div.item:not(.ui-tabs-hide)',$scroller).animate({ opacity: 1 });
						$('div.ui-tabs-hide',$scroller).animate({ opacity: 1 });
					}
				}
			);
		},
		
		show : function( event, ui ) {
			$('li',$thumbs).removeClass( 'current' );
			$thumbs.find(" a[rel='"+ (ui.index + 1) +"'] ").parent().addClass( 'current' );			
		}
		
	});
	
	$tabs.tabs( "option", "selected", $( "#scroller div.item" ).size() / 3 );


	$('li a',$thumbs).click(function() {
									
		$tabs.tabs('select', $(this).attr( 'rel' ) );
		return false;		
	});	

	var $scrollbar = $slider.slider({
		value: $( "#scroller div.item" ).size() / 3,
		animate: true,
		min: 0,
		max: $scroller.tabs( "length" ) - 1,
			slide: function( event, ui ) {
				$tabs.tabs( "select", ui.value );
			}
	});
		
	var handleHelper = $scrollbar.find( ".ui-slider-handle" ).wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
		
	$thumbs.css({ opacity : 0, visibility: 'visible' });
	$slider.css({ opacity : 0, visibility: 'visible' });
	
	function sizeScrollbar() {
		
		
		$w_thumb = 0;
		$thumbs.find('li').each(function(){
			$w_thumb = $w_thumb + $(this).outerWidth(true);																				  
		})
		
		$thumbs.width( $w_thumb ).css({ margin: '0 auto'} ).animate({ opacity : 1 });
		
		$slider.width( $thumbs.outerWidth() ).css({ margin: '0 auto'} ).animate({ opacity : 1 });
		
		handleHelper.width( "" ).width( $scrollbar.outerWidth() - ( $(".ui-slider-handle").outerWidth() * 2 - 12 ) );		
			
	}

	$(window).load( sizeScrollbar() );

	$( 'a.scroll-buttons' , $thumbs ).click(function(event){		
		
		var $selected = $tabs.tabs('option', 'selected');

		if( $(this).hasClass('next') && $selected <= $('li',$thumbs).length ) {
			$tabs.tabs( "select", $selected + 1 );
		}

		if( $(this).hasClass('prev') && $selected >= 0 ) {
			$tabs.tabs( "select", $selected - 1 );
		}
		
		event.preventDefault();

	});
});

$(window).load(function(){

        // Fade in images so there isn't a color "pop" document load and then on window load
        $(".item-overflow img").fadeIn(500);
// clone image
        $('.item-overflow img').each(function(){
            var el = $(this);
            el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('attachment-slider-post-thumbnail wp-post-image').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
                var el = $(this);
                el.parent().css({"width":this.width,"height":this.height});
                el.dequeue();
            });
            this.src = grayscale(this.src);
        });

        
       // Fade image
$('div.img_wrapper').mouseenter(function(){
        $('div.img_wrapper').mouseenter(function(){
           $(this).find('img:first').stop().animate({opacity:1}, 1000);
            
         }).mouseleave(function(){
           $(this).find('img:first').stop().animate({opacity:0}, 1000);
             
        });
		});

    // Grayscale w canvas method
    function grayscale(src){
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var imgObj = new Image();
        imgObj.src = src;
        canvas.width = imgObj.width;
        canvas.height = imgObj.height;
        ctx.drawImage(imgObj, 0, 0);
        var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
        for(var y = 0; y < imgPixels.height; y++){
            for(var x = 0; x < imgPixels.width; x++){
                var i = (y * 4) * imgPixels.width + x * 4;
                var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
                imgPixels.data[i] = avg;
                imgPixels.data[i + 1] = avg;
                imgPixels.data[i + 2] = avg;
            }
       }
        ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
        return canvas.toDataURL();
    }

});
});

[Deff]

Che,
Пробуйте убрать эту обёртку красным

187 $('div.img_wrapper').mouseenter(function(){
188 $('div.img_wrapper').mouseenter(function(){
189 $(this).find('img:first').stop().animate({opacity: 1}, 1000);
190
191 }).mouseleave(function(){
192 $(this).find('img:first').stop().animate({opacity: 0}, 1000);
193
194 });
195 });

[Che]

убрал. все равно фото остаются цветными...
Возможно это проблема первоначального кода скроллера? А именно, то, что связано с выводом фото после затемнения и показа плюсика и описания. Возможно там тоже какая-то обработка и получается "конфликт". К сожалению совсем не силен в яваскрипт.

[Deff]

Che,
Закоменнтите текущий скрипт - походу есть еще одно событие по

наведению
188 /*$('div.img_wrapper').mouseenter(function(){
189 $(this).find('img:first').stop().animate({opacity: 1}, 1000);
190
191 }).mouseleave(function(){
192 $(this).find('img:first').stop().animate({opacity: 0}, 1000);
193
194 }); */

[Deff]

Che,
Вродь нашел
Поставьте такую феню

<style type="text/css">.img_wrapper img + img{

 opacity:1.0!important;

}
</style>

И скрипт замените (он у нас обратного действия

// Fade image
$('div.img_wrapper').mouseenter(function(){
        $('div.img_wrapper').mouseenter(function(){
           $(this).find('img:first').stop().animate({opacity:0}, 1000);
           
         }).mouseleave(function(){
           $(this).find('img:first').stop().animate({opacity:1}, 1000);
			
        });

[Che]

Большое Вам спасибо, Deff.

Плюсик и затемнение исчезло.

Как сейчас:

1.При загрузке сайта в скроллере черно-белые фото.
2. Когда навожу на фото, оно показывается с тусклыми цветами (почти черно-белое).
3. После отвода курсора показывается цветное. При наведении на фото показывается с тусклыми цветами (почти черно-белое).

Нужно:

1. При загрузке сайта в скроллере черно-белые фото.
2. При наведении курсора на фото - цветное фото.
3. При отведении курсора от фото - черно-белое фото...

С уважением.