title: Using JQuery.BlackAndWhite with a Cycle2 Carousel?
body: <p>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: </p>
  
  <p>IMAGE A = B&amp;W<br>
  IMAGE B = Color<br>
  IMAGE C = B&amp;W<br>
  IMAGE D = NOT SHOWN  </p>
  
  <p>Once the slideshow advances, it would be something like this:</p>
  
  <p>IMAGE A = NOT SHOWN<br>
  IMAGE B = B&amp;W<br>
  IMAGE C = Color<br>
  IMAGE D = B&amp;W  </p>
  
  <p>I discovered Gianluca Guarini's <a href="http://gianlucaguarini.github.io/jQuery.BlackAndWhite/" rel="nofollow">jQuery.BlackAndWhite</a> plugin which handles the black and white conversion by adding the class <code>.bwWrapper</code>. If I use the <code>scrollHorz</code> parameter, the two work nicely together, but not when using <code>carousel</code>. The carousel runs as expected, but BlackAndWhite isn't coming into play. </p>
  
  <p>My code is below. The only difference between the two blocks is one is in a DIV. My guess is jQuery.BlackAndWhite runs on <code>(window).load</code> and Cycle2 <code>carousel</code> enters the picture after that?</p>
  
  <p>Any thoughts on how to get these to cooperate?</p>
  
  <pre><code>&lt;h3&gt;Cycle2&lt;/h3&gt;
  
  &lt;div id="slideshow"&gt;
    &lt;a href="#" class="bwWrapper"&gt;&lt;img src="/assets/images/img01.jpg" height="200" alt="test image"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="/assets/images/img02.jpg" height="200" alt="test image"&gt;&lt;/a&gt;
    &lt;a href="#" class="bwWrapper"&gt;&lt;img src="/assets/images/img03.jpg" height="200" alt="test image"&gt;&lt;/a&gt;
    &lt;a href="#"&gt;&lt;img src="/assets/images/img04.jpg" height="200" alt="test image"&gt;&lt;/a&gt;
    &lt;a href="#" class="bwWrapper"&gt;&lt;img src="/assets/images/img05.jpg" height="200" alt="test image"&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="center"&gt;
      &lt;a href=# id="prev"&gt;Prev&lt;/a&gt; 
      &lt;a href=# id="next"&gt;Next&lt;/a&gt;
  &lt;/div&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/jquery.cycle2.js"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/jquery.cycle2.carousel.min.js"&gt;&lt;/script&gt;
    &lt;script src="/assets/js/jquery.BlackAndWhite.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
   $(window).load(function() {
      $('#slideshow').cycle({
          fx: 'carousel',
          speed: '1000', 
          slides: '&gt; a',
          next: '#next',
          prev: '#prev'
      });
  
     $('.bwWrapper').BlackAndWhite({
           hoverEffect: false,
           invertHoverEffect: false
       });
    });
  &lt;/script&gt;    
  </code></pre>