JQuery / HTML / CSS Оттенки серого к цветному слайдеру изображения

Я надеюсь, что кто-то здесь может мне помочь. В настоящее время я создаю сайт для клиента, а на индексной странице будет слайдер / фейдер изображения, на котором будет отображаться последовательность изображений. То, что попросил клиент, заключается в переходе от одного изображения к другому для следующего изображения в последовательности, которое будет исчезать в виде оттенков серого и медленно превратится в цвет и паузу в течение нескольких секунд перед загрузкой на следующем изображении.

Я использую фейдер изображения, который отлично подходит для перехода, но хотел бы изменить его для функции оттенков серого. Будучи новичком в jQuery, и, похоже, в Интернете нет никаких «готовых построек», поэтому я немного борюсь.

Мой CSS следующий:

.index_slideshow { position:relative; height:340px; width:980px; margin:auto; } .index_slideshow IMG { position:absolute; top:0; left:0; z-index:8; } .index_slideshow IMG.active { z-index:10; } .index_slideshow IMG.last-active { z-index:9; } 

Мой jQuery выглядит следующим образом:

 function slideSwitch() { var $active = $('.index_slideshow IMG.active'); if ( $active.length == 0 ) $active = $('.index_slideshow IMG:last'); var $next = $active.next().length ? $active.next() : $('.index_slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0 }) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); 

И мой HTML:

 

Надеюсь, кто-нибудь может мне помочь! 🙂

Простым способом сделать это было бы вставить серые версии изображений в слайд-шоу:

 

(Я предполагаю, что из вашего img-заказа сначала будут отображаться изображения, которые отображаются ниже в коде, … но просто поменяйте позицию imgX.jpg и imgXgrey.jpg, если это неверное предположение.)

Кроме того, вы смотрите на комбинацию элементов Canvas и фильтров IE: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html (Игнорируйте tags, которые говорят код – это PHP. Это Javascript. Теги, вероятно, оставлены в крутизне от старой CMS.)

Вы должны расширить это, чтобы оживить каждый шаг между оттенками серого и цветом, так что, пока вы не имеете дело с массивными изображениями, первый метод является самым простым.