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