live_montier
Version:
just a sample test publish
211 lines (172 loc) • 7.25 kB
JavaScript
// Flip Carousel Plugin
// version 1.5
// written 12/13/12
// revamped and polished up 3/15/14
// copyright(c) 2012-2014 Ethan Herr
// http://herrmedia.com
// MIT License
$.fn.flipcarousel = function(options) {
//default options
var ops = $.extend({
itemsperpage : 3, //number of cards to display at once
duration : 500, //flip css transition-duration property in ms
randomizer : 0, //give randomness to card flip delay and duration (0 - 1)
loader : false, //show loader when loading content
arrows : true //arrows for previous/next navigation
//accrual : 1 //number of pages to preload (forthcoming)
//pagination : false //specific page navigation (forthcoming)
}, options);
//structural elements
var $container = $('<div class="flip-carousel">'),
$card = $('<div class="card">'),
$faces = $('<div class="face front"></div><div class="face back"></div>'),
$controls = $('<div class="controls">'),
$arrowright = $('<div class="arrow right keepMoving">'),
$arrowleft = $('<div class="arrow left hide">'),
$loader = $('<div class="loader hide">'),
$origs = this,
$cells = this.clone(),
//control elements
i = 0, //current page index
face = '.front', //flag for which card to append new data to
deg = 0, //track degree of flip
disabled = true, //flag to prevent clicks while loading
//master page/cell tracker
pages = [];
for(p=0; p < Math.ceil($cells.length/ops.itemsperpage); p++){
var start = ops.itemsperpage*p
pages[p] = $cells.slice(start, start + ops.itemsperpage )
};
function build(){ //make base html structure
var $li = $('<li>'),
$ul = $('<ul>');
$card.css({
'-webkit-transition-duration': ops.duration + 'ms',
'-moz-transition-duration': ops.duration + 'ms',
'-ms-transition-duration': ops.duration + 'ms',
'transition-duration': ops.duration + 'ms'
});
$container.append($ul);
$card.append($faces);
$li.append($card);
for(c=0; c<ops.itemsperpage; c++){
$ul.append($li.clone())
};
$arrowright.click(function(){ if(!disabled) go(i+1) });
$arrowleft.click(function(){ if(!disabled) go(i-1) });
$controls.append($arrowleft).append($arrowright);
$container.append($controls).append($loader);
$container.insertBefore($origs[0]);
$card = $('.card');
$origs.remove();
}
function load(cells, callback){ //load cell content, check for images
if (ops.loader) $loader.removeClass('hide');
var imgs = [];
var loaded = 0;
cells.find('img').each(function(index){
imgs.push('yah!');
img = new Image();
img.onload = function(){ proceed(null); };
img.onerror = function(){ proceed($(this)); };
img.src = $(this).attr('src');
});
if(!imgs.length){ $loader.addClass('hide'); callback(cells); }
function proceed(imgerror){
loaded++;
if(imgerror){
cells.find('img[src="'+imgerror.attr('src')+'"]').addClass('err');
};
if(loaded == imgs.length) {
callback(cells);
$loader.addClass('hide');
};
}
}
function place(cells, face){ //place content into div.face (into either .front or .back)
for(c=0; c < ops.itemsperpage; c++){
var cell = cells[c] || '<div class="empty"></div>';
$card.eq(c).find(face).html( $(cell).clone() );
};
}
function go(to){ //what page we are going to
arrows(to);
face = face == '.front' ? '.back' : '.front';
$('.back, .front').css({'z-index': 0})
$card.find(face).css({'z-index':0})
place(pages[to], face);
if(to > i) deg += 180;
else if(to < i) deg -= 180;
disabled = true;
flip(deg, function(){
if(to > i && pages[to+1]){ //background-load 1 page ahead
load(pages[to+1], function(cells){ disabled = false });
} else {
disabled = false;
}
i = to;
});
}
function arrows(i){ //update/hide arrows
$arrowright.add($arrowleft).removeClass('hide');
if(i == 0) $arrowleft.addClass('hide');
if(i == pages.length-1) $arrowright.addClass('hide');
}
function flip(d, flipdone){ //visual flippancy, updated to avoid IE
if(ops.randomizer) randomizer();
$card.css({
'-webkit-transform':'rotateY('+ d +'deg)',
'-moz-transform':'rotateY('+ d +'deg)'//,
//'-ms-transform':'rotateY('+ d +'deg)',
//'transform':'rotateY('+ d +'deg)'
});
if(flipdone) setTimeout(flipdone, ops.duration);
}
function shuffle(a) { //shuffle array
for(var j, x, i = a.length; i; j = parseInt(Math.random() * i), x = a[--i], a[i] = a[j], a[j] = x);
return a;
}
function randomizer(){ //ramdomizing! (kind of)
var delays = []; //delay animation between 0ms - ops.duration
var durations = []; //deviate -0.5 and +1.5 away from ops.duration when ops.randomizer = 1
for(a=1; a <= ops.itemsperpage; a++){
var num = a/ops.itemsperpage % 2;
num = Math.floor(num * ops.randomizer * ops.duration/2);
delays.push(num);
num = a/2 % 1 == 0 ? -num : num;
durations.push(ops.duration + num);
}
delays = shuffle(delays)
$card.each(function(index){
$(this).css({
'-webkit-transition-delay': delays[index] + 'ms',
'-moz-transition-delay': delays[index] + 'ms',
'-ms-transition-delay': delays[index] + 'ms',
'transition-delay': delays[index] + 'ms'
});
});
durations = shuffle(durations)
$card.each(function(index){
$(this).css({
'-webkit-transition-duration': durations[index] + 'ms',
'-moz-transition-duration': durations[index] + 'ms',
'-ms-transition-duration': durations[index] + 'ms',
'transition-duration': durations[index] + 'ms'
});
});
}
function init(){ //initializor!
build();
var toload = pages[1]? $.merge(pages[0], pages[1]) : pages[0]
load(toload, //load page 1 and 2 if 2 exists
function(cells){
place(cells.slice(0, ops.itemsperpage), '.front');
place(cells.slice(ops.itemsperpage, ops.itemsperpage*2), '.back');
disabled = false;
arrows(0);
flip(0);
});
}
init();
return this;
}