CoffeeFlow is a simple and powerful coverflow component which is able to easily rotate thousands of images. CoffeeFlow works with CSS3-compatible browsers (including mobile ones), has Opera fallback and a compatibility mode for older browsers. CoffeeFlow supports touch events and gestures (tap, drag, and swipe) automatically as you connect the hammer.js library. CoffeeFlow has a built-in image preloader which also handles image load errors. CoffeeFlow is designed to be used as a class and has jQuery wrapper. JQuery is required.
bower install coffee-flow
<-- jQuery library required -->
<script type="text/javascript" src="bower_components/jquery.min.js"></script>
<!-- Include EightMedia hammer.js if you want touch events support -->
<script type="text/javascript" src="bower_components/hammerjs/dist/hammer.min.js"></script>
<!-- CoffeeFlow component -->
<script type="text/javascript" src="bower_components/coffee-flow/js/coffeeflow.min.js"></script>
<!-- HTML -->
<div class="coffeeflow">
<a href="img/1.jpg"><img src="img/1.jpg" alt=""></a>
<a href="img/2.jpg"><img src="img/2.jpg" alt=""></a>
<a href="img/3.jpg"><img src="img/3.jpg" alt=""></a>
</div>
// JS
var coffeeflow = new Coffeeflow(target, options);
// jQuery
$(".coffeeflow").coffeeflow(options);$(".coffeeflow").coffeeflow(
{
borderWidth : 0 // item border width
borderColor : "rgba(255,255,255, .3)" // default item border-color
borderColorHover : "rgba(0,175,255, .8)" // item border color on mouse over
borderColorSelected : "rgba(250,210,6, .8)" // selected item border-color
borderStyle : "solid" // item border srtyle
crop : false // if true photos cropped to square
debug : false // enables console logging
defaultItem : "auto" // controls whitch items is opened on startup, by default middle is calculated
density : 3.2 // use this to adjust item spacing
height : "auto" // item height. Eq container height if not set
hideOverflow : true // crops everything outside the canvas
minHeight : 120 // minimum CoffeFlow canvas height in pixels
pull : true // enables pull images effect on mouseover
selectOnChange : false // if true select event fires on change
scrollSensitivity : 120 // handles too sensitive scrolling on apple trackpad
transitionDuration : 1800 // transition duration in seconds
transitionEasing : "cubic-bezier(0.075, 0.820, 0.165, 1.000)" // css easing for transitions
transitionPerspective : "600px" // css pespective
transitionScale : .70 // scale of inactive item
transitionRotation : 45 // rotation of inactive item
width : "auto" // item width in pixels. Eq item height if not set
}
);<-- You can also pass options to Coffeeflow with html5 -data -->
<div class="coffeeflow" data-border-width="2" data-default-item="5">
<a href="img/1.jpg"><img src="img/1.jpg" alt=""></a>
<a href="img/2.jpg"><img src="img/2.jpg" alt=""></a>
<a href="img/3.jpg"><img src="img/3.jpg" alt=""></a>
</div>$(".coffeeflow").coffeeflow(
{
blur : function (e){ console.log(e) },
change : function (e){ console.log(e) },
error : function (e){ console.log(e) },
focus : function (e){ console.log(e) },
ready : function (e){ console.log(e) },
select : function (e){ console.log(e) }
}
);
append(array) // appends elements
insert(array, position) // inserts elements
getCanvas() // returns canvas element, used internally
getHeight() // returns canvas height
getIndex() // returns current CoffeeFlow index
getItem(index=current) // returns CoffeeFlowItem instance. If index argument is not provided, currentIndex is used
getWidth() // returns canvas width
hasFocus() // returns boolean CoffeeFlow focus state
pop() // Deletes current item
pop(position, length) // Deletes fragment
prepend(array) // prepends elements
resize() // tells CoffeeFlow to resize the canvas
slideTo(index) // slides to a given item
// example
$(".coffeeflow").coffeeflow(
{
ready : function(e) {
e.insert(
[
{
data: {},
link: "http://ya.ru",
source: "img/1.jpg"
},
{
data: {},
link: "http://ya.ru",
source: "img/2.jpg"
}
],
e.getIndex()+1
);
e.slideTo(15)
}
}
);
arrange(currentItem, totalItems, canvasWidth, canwasHeight) // returns canvas element, used internally
getData() // returns item html5 data
getLink() // returns item anchor href
getSource() // returns item image source
getHeight() // returns item height
getWidth() // returns item width
select() // sets item select state
setContent(content) // sets item content, used internally
// example
$(".coffeeflow").coffeeflow(
{
change : function(e) { console.log( e.getItem().getData() ) }
}
);
The component is designed and written in coffeescript by Serge Droganov. CoffeeFlow is distributed under MIT X11 license.