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