Using JQuery.BlackAndWhite with a Cycle2 Carousel?

Question

I am putting together a Cycle2-based carousel where, essentially, every other image should be a black and white image. So, on first load it would be something like this:

IMAGE A = B&W
IMAGE B = Color
IMAGE C = B&W
IMAGE D = NOT SHOWN

Once the slideshow advances, it would be something like this:

IMAGE A = NOT SHOWN
IMAGE B = B&W
IMAGE C = Color
IMAGE D = B&W

I discovered Gianluca Guarini's jQuery.BlackAndWhite plugin which handles the black and white conversion by adding the class .bwWrapper. If I use the scrollHorz parameter, the two work nicely together, but not when using carousel. The carousel runs as expected, but BlackAndWhite isn't coming into play.

My code is below. The only difference between the two blocks is one is in a DIV. My guess is jQuery.BlackAndWhite runs on (window).load and Cycle2 carousel enters the picture after that?

Any thoughts on how to get these to cooperate?

<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

You can just use CSS to make the images grayscale. Here is a cross-browser compatible style that I've used in the past. The first filter is for Firefox, second for IE, and third for the other modern browsers.

.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+ */
}