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