Использование JQuery.BlackAndWhite с карусели Cycle2?

Question

Я собираю карусель на основе Cycle2, где, по существу, каждое другое изображение должно быть черно-белым. Так, при первой загрузке он будет что-то вроде этого:

IMAGE A = B & W
IMAGE B = Цвет
IMAGE C = B & W
IMAGE D = НЕ ПОКАЗАЛИ

После слайд-шоу прогресс, это было бы что-то вроде этого:

IMAGE A = НЕ ПОКАЗАЛИ
IMAGE B = B & W
IMAGE C = Color
ИЗОБРАЖЕНИЯ D = В & Вт

я обнаружил jQuery.BlackAndWhite плагин Джанлука Guarini, который обрабатывает черно-белое преобразование, добавив класс .bwWrapper. Если я использую параметр scrollHorz, они работают хорошо вместе, но не при использовании carousel. Карусель работает так, как ожидалось, но BlackAndWhite не вступает в игру.

Мой код ниже. Единственное различие между этими двумя блоками - одно в DIV. Я думаю, что jQuery.BlackAndWhite работает на (window).load, а Cycle2 carousel входит в изображение после этого?

Любые мысли о том, как заставить их сотрудничать?

<h3>Cycle2</h3> 

<div id="slideshow"> 
    <a href="#" class="bwWrapper"><img src="/assets/images/img01.jpg" height="200" alt="test image"></a> 
    <a href="#"><img src="/assets/images/img02.jpg" height="200" alt="test image"></a> 
    <a href="#" class="bwWrapper"><img src="/assets/images/img03.jpg" height="200" alt="test image"></a> 
    <a href="#"><img src="/assets/images/img04.jpg" height="200" alt="test image"></a> 
    <a href="#" class="bwWrapper"><img src="/assets/images/img05.jpg" height="200" alt="test image"></a> 
</div> 

<div class="center"> 
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a> 
</div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="/assets/js/jquery.cycle2.js"></script> 
    <script src="/assets/js/jquery.cycle2.carousel.min.js"></script> 
    <script src="/assets/js/jquery.BlackAndWhite.js"></script> 

<script> 
$(window).load(function() { 
    $('#slideshow').cycle({ 
     fx: 'carousel', 
     speed: '1000', 
     slides: '> a', 
     next: '#next', 
     prev: '#prev' 
    }); 

    $('.bwWrapper').BlackAndWhite({ 
     hoverEffect: false, 
     invertHoverEffect: false 
    }); 
    }); 
</script>  

Answer 1

Вы можете просто использовать CSS, чтобы сделать изображения полутонами. Вот стиль, совместимый с кросс-браузером, который я использовал в прошлом. Первый фильтр для Firefox, второй для IE и третий для других современных браузеров.

.bwWrapper img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
}