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 visibleItems : 2, 16 animationSpeed : 1000, 17 autoPlay : false, 18 autoPlaySpeed : 6000, 19 pauseOnHover : true, 20 setMaxWidthAndHeight : false, 21 enableResponsiveBreakpoints : true, 22 clone : true, 23 responsiveBreakpoints : { 24 portrait: { 25 changePoint:320, 26 visibleItems: 1 27 }, 28 landscape: { 29 changePoint:480, 30 visibleItems: 1 31 }, 32 tablet: { 33 changePoint:600, 34 visibleItems: 2 35 } 36 } 37 }, options); 38 39 /****************************** 40 Private Variables 41 *******************************/ 42 43 var object = $(this); 44 var settings = $.extend(defaults, options); 45 var itemsWidth; // Declare the global width of each item in carousel 46 var canNavigate = true; 47 var itemsVisible = settings.visibleItems; // Get visible items 48 var totalItems = object.children().length; // Get number of elements 49 var responsivePoints = []; 50 51 /****************************** 52 Public Methods 53 *******************************/ 54 var methods = { 55 init : function() { 56 return this.each(function() { 57 methods.appendHTML(); 58 methods.setEventHandlers(); 59 methods.initializeItems(); 60 }); 61 }, 62 63 /****************************** 64 Initialize Items 65 Fully initialize everything. Plugin is loaded and ready after finishing execution 66 *******************************/ 67 initializeItems : function() { 68 69 var listParent = object.parent(); 70 var innerHeight = listParent.height(); 71 var childSet = object.children(); 72 methods.sortResponsiveObject(settings.responsiveBreakpoints); 73 74 var innerWidth = listParent.width(); // Set widths 75 itemsWidth = (innerWidth) / itemsVisible; 76 childSet.width(itemsWidth); 77 if (settings.clone) { 78 childSet.last().insertBefore(childSet.first()); 79 childSet.last().insertBefore(childSet.first()); 80 object.css({ 81 'left' : -itemsWidth 82 }); 83 } 84 85 object.fadeIn(); 86 $(window).trigger("resize"); // needed to position arrows correctly 87 88 }, 89 90 /****************************** 91 Append HTML 92 Add additional markup needed by plugin to the DOM 93 *******************************/ 94 appendHTML : function() { 95 object.addClass("nbs-flexisel-ul"); 96 object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); 97 object.find("li").addClass("nbs-flexisel-item"); 98 99 if (settings.setMaxWidthAndHeight) { 100 var baseWidth = $(".nbs-flexisel-item img").width(); 101 var baseHeight = $(".nbs-flexisel-item img").height(); 102 $(".nbs-flexisel-item img").css("max-width", baseWidth); 103 $(".nbs-flexisel-item img").css("max-height", baseHeight); 104 } 105 $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object); 106 if (settings.clone) { 107 var cloneContent = object.children().clone(); 108 object.append(cloneContent); 109 } 110 }, 111 /****************************** 112 Set Event Handlers 113 Set events: click, resize, etc 114 *******************************/ 115 setEventHandlers : function() { 116 117 var listParent = object.parent(); 118 var childSet = object.children(); 119 var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); 120 var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); 121 122 $(window).on("resize", function(event) { 123 124 methods.setResponsiveEvents(); 125 126 var innerWidth = $(listParent).width(); 127 var innerHeight = $(listParent).height(); 128 129 itemsWidth = (innerWidth) / itemsVisible; 130 131 childSet.width(itemsWidth); 132 if (settings.clone) { 133 object.css({ 134 'left' : -itemsWidth 135 }); 136 }else { 137 object.css({ 138 'left' : 0 139 }); 140 } 141 142 var halfArrowHeight = (leftArrow.height()) / 2; 143 var arrowMargin = (innerHeight / 2) - halfArrowHeight; 144 leftArrow.css("top", arrowMargin + "px"); 145 rightArrow.css("top", arrowMargin + "px"); 146 147 }); 148 $(leftArrow).on("click", function(event) { 149 methods.scrollLeft(); 150 }); 151 $(rightArrow).on("click", function(event) { 152 methods.scrollRight(); 153 }); 154 if (settings.pauseOnHover == true) { 155 $(".nbs-flexisel-item").on({ 156 mouseenter : function() { 157 canNavigate = false;
158 }, 159 mouseleave : function() { 160 canNavigate = true; 161 } 162 }); 163 } 164 if (settings.autoPlay == true) { 165 166 setInterval(function() { 167 if (canNavigate == true) 168 methods.scrollRight(); 169 }, settings.autoPlaySpeed); 170 } 171 172 }, 173 /****************************** 174 Set Responsive Events 175 Set breakpoints depending on responsiveBreakpoints 176 *******************************/ 177 178 setResponsiveEvents: function() { 179 var contentWidth = $('html').width(); 180 181 if(settings.enableResponsiveBreakpoints) { 182 183 var largestCustom = responsivePoints[responsivePoints.length-1].changePoint; // sorted array 184 185 for(var i in responsivePoints) { 186 187 if(contentWidth >= largestCustom) { // set to default if width greater than largest custom responsiveBreakpoint 188 itemsVisible = settings.visibleItems; 189 break; 190 } 191 else { // determine custom responsiveBreakpoint to use 192 193 if(contentWidth < responsivePoints[i].changePoint) { 194 itemsVisible = responsivePoints[i].visibleItems; 195 break; 196 } 197 else 198 continue; 199 } 200 } 201 } 202 }, 203 204 /****************************** 205 Sort Responsive Object 206 Gets all the settings in resposiveBreakpoints and sorts them into an array 207 *******************************/ 208 209 sortResponsiveObject: function(obj) { 210 211 var responsiveObjects = []; 212 213 for(var i in obj) { 214 responsiveObjects.push(obj[i]); 215 } 216 217 responsiveObjects.sort(function(a, b) { 218 return a.changePoint - b.changePoint; 219 }); 220 221 responsivePoints = responsiveObjects; 222 }, 223 224 /****************************** 225 Scroll Left 226 *******************************/ 227 scrollLeft : function() { 228 if (object.position().left < 0) { 229 if (canNavigate == true) { 230 canNavigate = false; 231 232 var listParent = object.parent(); 233 var innerWidth = listParent.width(); 234 235 itemsWidth = (innerWidth) / itemsVisible; 236 237 var childSet = object.children(); 238 239 object.animate({ 240 'left' : "+=" + itemsWidth 241 }, { 242 queue : false, 243 duration : settings.animationSpeed, 244 easing : "linear", 245 complete : function() { 246 if (settings.clone) { 247 childSet.last().insertBefore( 248 childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 249 } 250 methods.adjustScroll(); 251 canNavigate = true; 252 } 253 }); 254 } 255 } 256 }, 257 /****************************** 258 Scroll Right 259 *******************************/ 260 scrollRight : function() { 261 var listParent = object.parent(); 262 var innerWidth = listParent.width(); 263 264 itemsWidth = (innerWidth) / itemsVisible; 265 266 var difObject = (itemsWidth - innerWidth); 267 var objPosition = (object.position().left + ((totalItems-itemsVisible)*itemsWidth)-innerWidth); 268 269 if((difObject < Math.ceil(objPosition)) && (!settings.clone)){ 270 if (canNavigate == true) { 271 canNavigate = false; 272 273 object.animate({ 274 'left' : "-=" + itemsWidth 275 }, { 276 queue : false, 277 duration : settings.animationSpeed, 278 easing : "linear", 279 complete : function() { 280 methods.adjustScroll(); 281 canNavigate = true; 282 } 283 }); 284 } 285 } else if(settings.clone){ 286 if (canNavigate == true) { 287 canNavigate = false;
288 289 var childSet = object.children(); 290 291 object.animate({ 292 'left' : "-=" + itemsWidth 293 }, { 294 queue : false, 295 duration : settings.animationSpeed, 296 easing : "linear", 297 complete : function() { 298 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) 299 methods.adjustScroll(); 300 canNavigate = true; 301 } 302 }); 303 } 304 }; 305 }, 306 /****************************** 307 Adjust Scroll 308 *******************************/ 309 adjustScroll : function() { 310 var listParent = object.parent(); 311 var childSet = object.children(); 312 313 var innerWidth = listParent.width(); 314 itemsWidth = (innerWidth) / itemsVisible; 315 childSet.width(itemsWidth); 316 if (settings.clone) { 317 object.css({ 318 'left' : -itemsWidth 319 }); 320 } 321 } 322 }; 323 if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); 324 return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 325 } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 326 return methods.init.apply(this); 327 } else { 328 $.error('Method "' + method + '" does not exist in flexisel plugin!'); 329 } 330 }; 331})(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.