jcarousellite.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. (function($) { // Compliant with jquery.noConflict()
  2. $.fn.jCarouselLite = function(o) {
  3. o = $.extend({
  4. btnPrev: null,
  5. btnNext: null,
  6. btnGo: null,
  7. mouseWheel: false,
  8. auto: null,
  9. speed: 200,
  10. easing: null,
  11. vertical: false,
  12. circular: true,
  13. visible: 3,
  14. start: 0,
  15. scroll: 1,
  16. beforeStart: null,
  17. afterEnd: null
  18. }, o || {});
  19. return this.each(function() { // Returns the element collection. Chainable.
  20. var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
  21. var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
  22. if(o.circular) {
  23. ul.prepend(tLi.slice(tl-v-1+1).clone())
  24. .append(tLi.slice(0,v).clone());
  25. o.start += v;
  26. }
  27. var li = $("li", ul), itemLength = li.size(), curr = o.start;
  28. div.css("visibility", "visible");
  29. li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
  30. ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
  31. div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
  32. var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
  33. var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
  34. var divSize = liSize * v; // size of entire div(total length for just the visible items)
  35. li.css({width: li.width(), height: li.height()});
  36. ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
  37. div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
  38. if(o.btnPrev)
  39. $(o.btnPrev).click(function() {
  40. return go(curr-o.scroll);
  41. });
  42. if(o.btnNext)
  43. $(o.btnNext).click(function() {
  44. return go(curr+o.scroll);
  45. });
  46. if(o.btnGo)
  47. $.each(o.btnGo, function(i, val) {
  48. $(val).click(function() {
  49. return go(o.circular ? o.visible+i : i);
  50. });
  51. });
  52. if(o.mouseWheel && div.mousewheel)
  53. div.mousewheel(function(e, d) {
  54. return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
  55. });
  56. if(o.auto)
  57. setInterval(function() {
  58. go(curr+o.scroll);
  59. }, o.auto+o.speed);
  60. function vis() {
  61. return li.slice(curr).slice(0,v);
  62. };
  63. function go(to) {
  64. if(!running) {
  65. if(o.beforeStart)
  66. o.beforeStart.call(this, vis());
  67. if(o.circular) { // If circular we are in first or last, then goto the other end
  68. if(to<=o.start-v-1) { // If first, then goto last
  69. ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
  70. // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
  71. curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
  72. } else if(to>=itemLength-v+1) { // If last, then goto first
  73. ul.css(animCss, -( (v) * liSize ) + "px" );
  74. // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
  75. curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
  76. } else curr = to;
  77. } else { // If non-circular and to points to first or last, we just return.
  78. if(to<0 || to>itemLength-v) return;
  79. else curr = to;
  80. } // If neither overrides it, the curr will still be "to" and we can proceed.
  81. running = true;
  82. ul.animate(
  83. animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
  84. function() {
  85. if(o.afterEnd)
  86. o.afterEnd.call(this, vis());
  87. running = false;
  88. }
  89. );
  90. // Disable buttons when the carousel reaches the last/first, and enable when not
  91. if(!o.circular) {
  92. $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
  93. $( (curr-o.scroll<0 && o.btnPrev)
  94. ||
  95. (curr+o.scroll > itemLength-v && o.btnNext)
  96. ||
  97. []
  98. ).addClass("disabled");
  99. }
  100. }
  101. return false;
  102. };
  103. });
  104. };
  105. function css(el, prop) {
  106. return parseInt($.css(el[0], prop)) || 0;
  107. };
  108. function width(el) {
  109. return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
  110. };
  111. function height(el) {
  112. return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
  113. };
  114. })(jQuery);