1/* 2 * File: jquery.flexisel.js 3 * Version: 1.0.2 4 * Description: Responsive carousel jQuery plugin 5 * Author: 9bit Studios 6 * Copyright 2012, 9bit Studios 7 * http://www.9bitstudios.com 8 * Free to use and abuse under the MIT license. 9 * http://www.opensource.org/licenses/mit-license.php 10 */ 11(function ($) { 12 $.fn.flexisel = function(options) { 13 14 var defaults = $.extend({ 15 pref: "flexi", 16 visibleItems : 4, 17 itemMargin : 20, 18 animationSpeed : 200, 19 autoPlay : false, 20 autoPlaySpeed : 3000, 21 pauseOnHover : true, 22 setMaxWidthAndHeight : false, 23 showbuttons : false, 24 enableResponsiveBreakpoints : true, 25 clone : true, 26 responsiveBreakpoints : { 27 portrait: { 28 changePoint:480, 29 visibleItems: 1 30 }, 31 landscape: { 32 changePoint:728, 33 visibleItems: 2 34 }, 35 tablet: { 36 changePoint:991, 37 visibleItems: 3 38 }, 39 tablet_lanf: { 40 changePoint:1199, 41 visibleItems: 5 42 } 43 } 44 }, options); 45 46 /****************************** 47 Private Variables 48 *******************************/ 49 50 var object = $(this); 51 var settings = $.extend(defaults, options); 52 var itemsWidth; // Declare the global width of each item in carousel 53 var canNavigate = true; 54 var itemsVisible = settings.visibleItems; // Get visible items 55 var itemMargin = settings.itemMargin; 56 var pref = settings.pref; 57 var totalItems = object.children().length; // Get number of elements 58 var responsivePoints = []; 59 60 /****************************** 61 Public Methods 62 *******************************/ 63 var methods = { 64 init : function() { 65 return this.each(function() { 66 methods.appendHTML(); 67 methods.setEventHandlers(); 68 methods.initializeItems(); 69 }); 70 }, 71 72 /****************************** 73 Initialize Items 74 Fully initialize everything. Plugin is loaded and ready after finishing execution 75 *******************************/ 76 initializeItems : function() { 77 78 var listParent = object.parent(); 79 var innerHeight = listParent.height(); 80 var childSet = object.children(); 81 methods.sortResponsiveObject(settings.responsiveBreakpoints); 82 83 var innerWidth = listParent.width(); // Set widths 84 itemsWidth = (innerWidth) / itemsVisible; 85 childSet.width(itemsWidth); 86 if (settings.clone) { 87 childSet.last().insertBefore(childSet.first()); 88 childSet.last().insertBefore(childSet.first()); 89 object.css({ 90 'left' : -itemsWidth 91 }); 92 } 93 94 object.fadeIn(); 95 $(window).trigger("resize"); // needed to position arrows correctly 96 97 }, 98 99 /****************************** 100 Append HTML 101 Add additional markup needed by plugin to the DOM 102 *******************************/ 103 appendHTML : function() { 104 object.addClass("nbs-flexisel-ul"); 105 object.wrap("<div class='"+pref+"-nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); 106 object.find("li").addClass("nbs-flexisel-item"); 107 108 /*if (settings.showbuttons) { 109 var buttons_num = Math.round(totalItems/itemsVisible); 110 $("<div class='"+pref+"-flexisel-buttons flexisel-buttons'></div>").insertAfter('.'+pref+'-nbs-flexisel-container'); 111 for (var i = 0; i < buttons_num; i++) { 112 $("<div class='item-"+i+"'></div>").appendTo("."+pref+"-flexisel-buttons"); 113 } 114 }*/ 115 if (settings.setMaxWidthAndHeight) { 116 var baseWidth = $(".nbs-flexisel-item img").width(); 117 var baseHeight = $(".nbs-flexisel-item img").height(); 118 $(".nbs-flexisel-item img").css("max-width", baseWidth); 119 $(".nbs-flexisel-item img").css("max-height", baseHeight); 120 } 121 $("<div class='flexisel-nav-wrapper'><div class='"+pref+"-flexisel-left flexisel-nav nbs-flexisel-nav-left'></div><div class='"+pref+"-flexisel-right flexisel-nav nbs-flexisel-nav-right'></div></div>").insertAfter('.'+pref+'-nbs-flexisel-container'); 122 if (settings.clone) { 123 var cloneContent = object.children().clone(); 124 object.append(cloneContent); 125 } 126 }, 127 /****************************** 128 Set Event Handlers 129 Set events: click, resize, etc 130 *******************************/ 131 setEventHandlers : function() { 132 133 var listParent = object.parent(); 134 var childSet = object.children(); 135 var leftArrow = $("."+pref+"-flexisel-left"); 136 var rightArrow = $("."+pref+"-flexisel-right"); 137 138 $(window).on("resize", function(event) { 139 140 methods.setResponsiveEvents(); 141 142 var innerWidth = $(listParent).width(); 143 var innerHeight = $(listParent).height(); 144 145 itemsWidth = (innerWidth) / itemsVisible; 146 147 childSet.width(itemsWidth); 148 if (settings.clone) { 149 object.css({ 150 'left' : -itemsWidth 151 }); 152 }else { 153 object.css({ 154 'left' : 0 155 }); 156 } 157 158 //var halfArrowHeight = (leftArrow.height()) / 2; 159 //var arrowMargin = (innerHeight / 2) - halfArrowHeight; 160 //leftArrow.css("top", arrowMargin + "px"); 161 //rightArrow.css("top", arrowMargin + "px"); 162 163 }); 164 $(leftArrow).on("click", function(event) { 165 methods.f_scrollLeft(); 166 }); 167 $(rightArrow).on("click", function(event) { 168 methods.f_scrollRight(); 169 }); 170 /*$(object).swipe( { 171 swipeStatus:function(event, phase, direction, distance, duration, fingerCount) { 172 alert(distance); 173 if (direction == "right") { 174 methods.f_scrollLeft(); 175 } 176 if (direction == "left") { 177 methods.f_scrollRight(); 178 } 179 if (phase == "move") { 180 $(object).addClass('hoverdisable'); 181 } else if (phase == "end") { 182 $(object).removeClass('hoverdisable'); 183 } 184 185 } 186 });*/ 187 if (settings.pauseOnHover == true) { 188 $(".nbs-flexisel-item").on({ 189 mouseenter : function() { 190 canNavigate = false;
191 }, 192 mouseleave : function() { 193 canNavigate = true; 194 } 195 }); 196 } 197 if (settings.autoPlay == true) { 198 199 setInterval(function() { 200 if (canNavigate == true) 201 methods.f_scrollRight(); 202 }, settings.autoPlaySpeed); 203 } 204 205 }, 206 /****************************** 207 Set Responsive Events 208 Set breakpoints depending on responsiveBreakpoints 209 *******************************/ 210 211 setResponsiveEvents: function() { 212 var contentWidth = $('html').width(); 213 214 if(settings.enableResponsiveBreakpoints) { 215 216 var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array 217 218 for(var i in responsivePoints) { 219 220 if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 221 itemsVisible = settings.visibleItems; 222 break; 223 } 224 else { // determine custom responsiveBreakpoint to use 225 226 if(contentWidth < responsivePoints[i].changePoint) { 227 itemsVisible = responsivePoints[i].visibleItems; 228 break; 229 } 230 else 231 continue; 232 } 233 } 234 } 235 }, 236 237 /****************************** 238 Sort Responsive Object 239 Gets all the settings in resposiveBreakpoints and sorts them into an array 240 *******************************/ 241 242 sortResponsiveObject: function(obj) { 243 244 var responsiveObjects = []; 245 246 for(var i in obj) { 247 responsiveObjects.push(obj[i]); 248 } 249 250 responsiveObjects.sort(function(a, b) { 251 return a.changePoint - b.changePoint; 252 }); 253 254 responsivePoints = responsiveObjects; 255 }, 256 257 /****************************** 258 Scroll Left 259 *******************************/ 260 f_scrollLeft : function() { 261 if (object.position().left < 0) { 262 if (canNavigate == true) { 263 canNavigate = false; 264 265 var listParent = object.parent(); 266 var innerWidth = listParent.width(); 267 268 itemsWidth = (innerWidth) / itemsVisible; 269 270 var childSet = object.children(); 271 272 object.animate({ 273 'left' : "+=" + itemsWidth 274 }, { 275 queue : false, 276 duration : settings.animationSpeed, 277 easing : "easeOutExpo", 278 complete : function() { 279 if (settings.clone) { 280 childSet.last().insertBefore( 281 childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 282 } 283 methods.adjustScroll(); 284 canNavigate = true; 285 } 286 }); 287 } 288 } 289 }, 290 /****************************** 291 Scroll Right 292 *******************************/ 293 f_scrollRight : function() { 294 var listParent = object.parent(); 295 var innerWidth = listParent.width(); 296 297 itemsWidth = (innerWidth) / itemsVisible; 298 299 var difObject = (itemsWidth - innerWidth); 300 var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth); 301 302 if((difObject < Math.ceil(objPosition)) && (!settings.clone)){ 303 if (canNavigate == true) { 304 canNavigate = false; 305 306 object.animate({ 307 'left' : "-=" + itemsWidth 308 }, { 309 queue : false, 310 duration : settings.animationSpeed, 311 easing : "easeOutExpo", 312 complete : function() { 313 methods.adjustScroll(); 314 canNavigate = true; 315 } 316 }); 317 } 318 } else if(settings.clone){ 319 if (canNavigate == true) { 320 canNavigate = false;
321 322 var childSet = object.children(); 323 324 object.animate({ 325 'left' : "-=" + itemsWidth 326 }, { 327 queue : false, 328 duration : settings.animationSpeed, 329 easing : "easeOutExpo", 330 complete : function() { 331 childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 332 methods.adjustScroll(); 333 canNavigate = true; 334 } 335 }); 336 } 337 }; 338 }, 339 /****************************** 340 Adjust Scroll 341 *******************************/ 342 adjustScroll : function() { 343 var listParent = object.parent(); 344 var childSet = object.children(); 345 346 var innerWidth = listParent.width(); 347 itemsWidth = (innerWidth) / itemsVisible; 348 childSet.width(itemsWidth); 349 if (settings.clone) { 350 object.css({ 351 'left' : -itemsWidth 352 }); 353 } 354 } 355 }; 356 if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); 357 return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 358 } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 359 return methods.init.apply(this); 360 } else { 361 $.error('Method "' + method + '" does not exist in flexisel plugin!'); 362 } 363 364 365 }; 366})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.