1 (function ($) { 2 3 $.fn.flexisel = function (options) { defaults = $.extend({ 6 visibleItems: 4, 7 animationSpeed: 200, 8 autoPlay: false, 9 autoPlaySpeed: 3000, 10 pauseOnHover: true, 11 setMaxWidthAndHeight: false, 12 enableResponsiveBreakpoints: false, 13 responsiveBreakpoints: { 14 portrait: { 15 changePoint:480, 16 visibleItems: 1 17 }, 18 landscape: { 19 changePoint:640, 20 visibleItems: 2 21 }, 22 tablet: { 23 changePoint:768, 24 visibleItems: 3 25 } 26 } 27 }, options); ***************************** 30 Private Variables object = $(this); 34 var settings = $.extend(defaults, options); canNavigate = true; 37 var itemsVisible = settings.visibleItems; ***************************** 40 Public Methods methods = { 44 45 init: function() { .each(function () { 48 methods.appendHTML(); 49 methods.setEventHandlers(); 50 methods.initializeItems(); 51 }); 52 }, ***************************** 55 Initialize Items initializeItems: function() { listParent = object.parent(); 61 var innerHeight = listParent.height(); 62 var childSet = object.children(); innerWidth = listParent.width(); itemsWidth = (innerWidth)/itemsVisible; 66 childSet.width(itemsWidth); 67 childSet.last().insertBefore(childSet.first()); 68 childSet.last().insertBefore(childSet.first()); 69 object.css({'left' : -itemsWidth}); 70 71 object.fadeIn(); }, ***************************** 78 Append HTML appendHTML: function() { 82 83 object.addClass("nbs-flexisel-ul"); 84 object.wrap("<div><div></div></div>"); 85 object.find("li").addClass("nbs-flexisel-item"); (settings.setMaxWidthAndHeight) { 88 var baseWidth = $(".nbs-flexisel-item > img").width(); 89 var baseHeight = $(".nbs-flexisel-item > img").height(); 90 $(".nbs-flexisel-item > img").css("max-width", baseWidth); 91 $(".nbs-flexisel-item > img").css("max-height", baseHeight); 92 } 93 94 $("<div></div><div></div>").insertAfter(object); 95 var cloneContent = object.children().clone(); 96 object.append(cloneContent); 97 }, ***************************** 101 Set Event Handlers setEventHandlers: function() { listParent = object.parent(); 106 var childSet = object.children(); 107 var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); 108 var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); 109 110 $(window).on("resize", function(event){ 111 112 methods.setResponsiveEvents(); innerWidth = $(listParent).width(); 115 var innerHeight = $(listParent).height(); 116 117 itemsWidth = (innerWidth)/itemsVisible; 118 119 childSet.width(itemsWidth); 120 object.css({'left' : -itemsWidth}); halfArrowHeight = (leftArrow.height())/2; 123 var arrowMargin = (innerHeight/2) - halfArrowHeight; 124 leftArrow.css("top", arrowMargin + "px"); 125 rightArrow.css("top", arrowMargin + "px"); 126 127 }); 128 129 $(leftArrow).on("click", function (event) { 130 methods.scrollLeft(); 131 }); 132 133 $(rightArrow).on("click", function (event) { 134 methods.scrollRight(); 135 }); (settings.pauseOnHover == true) { 138 $(".nbs-flexisel-item").on({ 139 mouseenter: function () { 140 canNavigate = false; 141 }, 142 mouseleave: function () { 143 canNavigate = true; 144 } 145 }); 146 } (settings.autoPlay == true) { 149 150 setInterval(function () { 151 if(canNavigate == true) 152 methods.scrollRight(); 153 }, settings.autoPlaySpeed); 154 } 155 156 }, ***************************** 159 Set Responsive Events setResponsiveEvents: function() { 163 var contentWidth = $('html').width(); (settings.enableResponsiveBreakpoints == true) { 166 if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) { 167 itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems; 168 } (contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) { 170 itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems; 171 } (contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) { 173 itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems; 174 } 175 else { 176 itemsVisible = settings.visibleItems; 177 } 178 } 179 }, ***************************** 182 Scroll Left scrollLeft:function() { (canNavigate == true) { 188 canNavigate = false; listParent = object.parent(); 191 var innerWidth = listParent.width(); 192 193 itemsWidth = (innerWidth)/itemsVisible; childSet = object.children(); 196 197 object.animate({ 198 'left' : "+=" + itemsWidth 199 }, 200 { 201 queue:false, 202 duration:settings.animationSpeed, 203 easing: "linear", 204 complete: function() { methods.adjustScroll(); 207 canNavigate = true; 208 } 209 } 210 ); 211 } 212 }, ***************************** 215 Scroll Right scrollRight:function() { (canNavigate == true) { 221 canNavigate = false; listParent = object.parent(); 224 var innerWidth = listParent.width(); 225 226 itemsWidth = (innerWidth)/itemsVisible; childSet = object.children(); 229 230 object.animate({ 231 'left' : "-=" + itemsWidth 232 }, 233 { 234 queue:false, 235 duration:settings.animationSpeed, 236 easing: "linear", 237 complete: function() { methods.adjustScroll(); 240 canNavigate = true; 241 } 242 } 243 ); 244 } 245 }, ***************************** 248 Adjust Scroll adjustScroll: function() { listParent = object.parent(); 254 var childSet = object.children(); innerWidth = listParent.width(); 257 itemsWidth = (innerWidth)/itemsVisible; 258 childSet.width(itemsWidth); 259 object.css({'left' : -itemsWidth}); 260 } 261 262 }; (methods[options]) { methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); methods.init.apply(this); 268 } else { 269 $.error( 'Method "' + method + '" does not exist in flexisel plugin!'); 270 } 271 }; 272 273 })(jQuery);