Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 17399b1
Showing
1 changed file
with
192 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,192 @@ | ||
/** | ||
* CarouselFlow - jQuery plugin to navigate images in a hybrid carousel/coverflow style widget. | ||
* @requires jQuery v1.3.2 or above | ||
* | ||
* http://actridge.com/projects/carouselFlow | ||
* | ||
* Copyright (c) 2010 Vance Lucas (vancelucas.com) | ||
* Released under the MIT license: | ||
* http://www.opensource.org/licenses/mit-license.php | ||
*/ | ||
/** | ||
* Based on the great work by: | ||
* | ||
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget. | ||
* @requires jQuery v1.2 or above | ||
* | ||
* http://gmarwaha.com/jquery/jcarousellite/ | ||
* | ||
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com) | ||
* Dual licensed under the MIT and GPL licenses: | ||
* http://www.opensource.org/licenses/mit-license.php | ||
* http://www.gnu.org/licenses/gpl.html | ||
*/ | ||
(function($) { | ||
$.fn.carouselFlow = function(o) { | ||
var o = $.extend({ | ||
btnPrev: null, | ||
btnNext: null, | ||
btnGo: null, | ||
mouseWheel: false, | ||
auto: null, | ||
|
||
speed: 200, | ||
easing: null, | ||
|
||
vertical: false, | ||
circular: true, | ||
visible: 5, | ||
start: 0, | ||
scroll: 1, | ||
|
||
width: 'auto', | ||
|
||
beforeStart: null, | ||
afterEnd: null | ||
}, o || {}); | ||
|
||
return this.each(function() { // Returns the element collection. Chainable. | ||
|
||
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width"; | ||
var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible; | ||
|
||
if(o.circular) { | ||
ul.prepend(tLi.slice(tl-v-1+1).clone()) | ||
.append(tLi.slice(0,v).clone()); | ||
o.start += v; | ||
} | ||
|
||
var li = $("li", ul), itemLength = li.size(), curr = o.start; | ||
div.css("visibility", "visible"); | ||
|
||
li.css({overflow: "hidden", float: o.vertical ? "none" : "left"}); | ||
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); | ||
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"}); | ||
|
||
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation | ||
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items) | ||
if(o.width == 'auto') { | ||
var divSize = liSize * v; // size of entire div(total length for just the visible items) | ||
} else { | ||
var divSize = o.width; | ||
} | ||
|
||
li.css({width: li.width(), height: li.height()}); | ||
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); | ||
|
||
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images | ||
|
||
if(o.btnPrev) | ||
$(o.btnPrev).click(function() { | ||
return go(curr-o.scroll); | ||
}); | ||
|
||
if(o.btnNext) | ||
$(o.btnNext).click(function() { | ||
return go(curr+o.scroll); | ||
}); | ||
|
||
if(o.btnGo) | ||
$.each(o.btnGo, function(i, val) { | ||
$(val).click(function() { | ||
return go(o.circular ? o.visible+i : i); | ||
}); | ||
}); | ||
|
||
if(o.mouseWheel && div.mousewheel) | ||
div.mousewheel(function(e, d) { | ||
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll); | ||
}); | ||
|
||
if(o.auto) | ||
setInterval(function() { | ||
go(curr+o.scroll); | ||
}, o.auto+o.speed); | ||
|
||
function vis() { | ||
return li.slice(curr).slice(0,v); | ||
}; | ||
|
||
function go(to) { | ||
if(!running) { | ||
|
||
if(o.beforeStart) { | ||
o.beforeStart.call(this, vis()); | ||
} | ||
|
||
//* | ||
console.log(li); | ||
// Animate sizes - center one 100%, left and right flank and reduce sizes in 10% steps (by default) | ||
itemSizeEach = v | ||
li.each(function() { | ||
var itemSizeMulti = tl-v; | ||
$(this).animate({ | ||
'width': itemSizeMulti*100+'px', | ||
'height': itemSizeMulti*100+'px' | ||
}, o.speed, o.easing, function() {}); | ||
}); | ||
//*/ | ||
|
||
if(o.circular) { // If circular we are in first or last, then goto the other end | ||
if(to<=o.start-v-1) { // If first, then goto last | ||
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px"); | ||
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements. | ||
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll; | ||
} else if(to>=itemLength-v+1) { // If last, then goto first | ||
ul.css(animCss, -( (v) * liSize ) + "px" ); | ||
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements. | ||
curr = to==itemLength-v+1 ? v+1 : v+o.scroll; | ||
} else curr = to; | ||
} else { // If non-circular and to points to first or last, we just return. | ||
if(to<0 || to>itemLength-v) return; | ||
else curr = to; | ||
} // If neither overrides it, the curr will still be "to" and we can proceed. | ||
|
||
running = true; | ||
|
||
ul.animate( | ||
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, | ||
function() { | ||
if(o.afterEnd) | ||
o.afterEnd.call(this, vis()); | ||
running = false; | ||
} | ||
); | ||
// Disable buttons when the carousel reaches the last/first, and enable when not | ||
if(!o.circular) { | ||
$(o.btnPrev + "," + o.btnNext).removeClass("disabled"); | ||
$( (curr-o.scroll<0 && o.btnPrev) | ||
|| | ||
(curr+o.scroll > itemLength-v && o.btnNext) | ||
|| | ||
[] | ||
).addClass("disabled"); | ||
} | ||
|
||
/* | ||
alert( | ||
'Total: ' + tl + '\n' + | ||
'Current: ' + curr + '\n' + | ||
'Start: ' + o.start + '\n' + | ||
'Visible: ' + v + '\n' + | ||
'Length: ' + itemLength + '\n' + | ||
'DIV Size: ' + divSize + '\n' | ||
); | ||
*/ | ||
} | ||
return false; | ||
}; | ||
}); | ||
}; | ||
|
||
function css(el, prop) { | ||
return parseInt($.css(el[0], prop)) || 0; | ||
}; | ||
function width(el) { | ||
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight'); | ||
}; | ||
function height(el) { | ||
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom'); | ||
}; | ||
|
||
})(jQuery); |