Подсветка черно-белого изображения в цветное при наведении

Опубликовано Сб, 28/04/2012 - 23:33 пользователем wshurik

Чернобелые изображения могут быть очень кстати в фотогалереях, портфолио и даже для витрины интернет-магазина. Но не в статичном виде, а с симпатичным jquery-эффектом подсветки чернобелого изображения в цвет. Получается замечательно, посмотрите сами: демо.

Чтобы использовать этот эффект в друпале, надо всего-навсего создать в папке темы файл, скажем, hover.js с таким содержимым.

  1. // On window load. This waits until images have loaded which is essential
  2.         $(window).load(function(){
  3.                
  4.                 // Fade in images so there isn't a color "pop" document load and then on window load
  5.                 $(".item img").fadeIn(500);
  6.                
  7.                 // clone image
  8.                 $('.item img').each(function(){
  9.                         var el = $(this);
  10.                         el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
  11.                                 var el = $(this);
  12.                                 el.parent().css({"width":this.width,"height":this.height});
  13.                                 el.dequeue();
  14.                         });
  15.                         this.src = grayscale(this.src);
  16.                 });
  17.                
  18.                 // Fade image
  19.                 $('.item img').mouseover(function(){
  20.                         $(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
  21.                 })
  22.                 $('.img_grayscale').mouseout(function(){
  23.                         $(this).stop().animate({opacity:0}, 1000);
  24.                 });            
  25.         });
  26.        
  27.         // Grayscale w canvas method
  28.         function grayscale(src){
  29.                 var canvas = document.createElement('canvas');
  30.                 var ctx = canvas.getContext('2d');
  31.                 var imgObj = new Image();
  32.                 imgObj.src = src;
  33.                 canvas.width = imgObj.width;
  34.                 canvas.height = imgObj.height;
  35.                 ctx.drawImage(imgObj, 0, 0);
  36.                 var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
  37.                 for(var y = 0; y < imgPixels.height; y++){
  38.                         for(var x = 0; x < imgPixels.width; x++){
  39.                                 var i = (y * 4) * imgPixels.width + x * 4;
  40.                                 var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
  41.                                 imgPixels.data[i] = avg;
  42.                                 imgPixels.data[i + 1] = avg;
  43.                                 imgPixels.data[i + 2] = avg;
  44.                         }
  45.                 }
  46.                 ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
  47.                 return canvas.toDataURL();
  48.     }

Подключаем наш js в файле темы (YOUR_THEME.info):

scripts[] = hover.js

 Как использовать?

1. Подключить jquery.min.js

2. Указать в hover.js для каких классов с изображениями применять эффект (например, .item img, .gallery img, и т.д.)

3. По желанию изменить скорость эффекта.

.item img - значит, что для всех элементов <img> находящиеся внутри элементов с классом item, будет выполняться скрипт. Сюда можно подставить свои классы.
1000 - скорость эффекта.

И не забывайте сбрасывать кеш :)

Автора автора

drupal
друпал
js