Blended - jQuery plugin

A carousel with images blended together (mask effect).

Author: Ondrej Simek

Download

The latest version can be downloaded here, or by clonning the repository. Then just initialize blended like this:

<script type='text/javascript' src='/js/jquery.blended.js'></script>

Example

$(document).ready(function() {
	$('#slideshow').blendedCarousel({
		width: 800,
		height: 333,
		mousePanning: true
	});
});

<div id='slideshow'>
	<img src='photos/1.jpg'/>
	<img src='photos/2.jpg'/>
	...
</div>

Browser compatibility

Tested in:

• Opera 10.60
• Chrome 5
• Firefox 3.6.6

Doesn't work in IE!

TODO

• Internet Explorer support
• Automatic animation
• Animate panning with an easing
• Allowing to set easing for blends
• Vertical carousels
• Clickable images (linking to e.g. lighboxes, etc.)
• External controls (buttons)
• Documentation!

As you can see, a lot of work to be done, feel free to fork it! :)

Credits

Thanks to Sean Klingelhoefer for permission to use these wonderful Lexus photos in the demo.