1/* 2* File: jquery.flexisel.js 3* Version: 1.0.0 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 12(function ($) { 13 14 $.fn.flexisel = function (options) { 15 16 var defaults = $.extend({ 17 visibleItems: 4, 18 animationSpeed: 200, 19 autoPlay: false, 20 autoPlaySpeed: 3000, 21 pauseOnHover: true, 22 setMaxWidthAndHeight: false, 23 enableResponsiveBreakpoints: false, 24 responsiveBreakpoints: { 25 portrait: { 26 changePoint:480, 27 visibleItems: 1 28 }, 29 landscape: { 30 changePoint:640, 31 visibleItems: 2 32 }, 33 tablet: { 34 changePoint:768, 35 visibleItems: 3 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; 49 50 /****************************** 51 Public Methods 52 *******************************/ 53 54 var methods = { 55 56 init: function() { 57 58 return this.each(function () { 59 methods.appendHTML(); 60 methods.setEventHandlers(); 61 methods.initializeItems(); 62 }); 63 }, 64 65 /****************************** 66 Initialize Items 67 *******************************/ 68 69 initializeItems: function() { 70 71 var listParent = object.parent(); 72 var innerHeight = listParent.height(); 73 var childSet = object.children(); 74 75 var innerWidth = listParent.width(); // Set widths 76 itemsWidth = (innerWidth)/itemsVisible; 77 childSet.width(itemsWidth); 78 childSet.last().insertBefore(childSet.first()); 79 childSet.last().insertBefore(childSet.first()); 80 object.css({'left' : -itemsWidth}); 81 82 object.fadeIn(); 83 $(window).trigger("resize"); // needed to position arrows correctly 84 85 }, 86 87 88 /****************************** 89 Append HTML 90 *******************************/ 91 92 appendHTML: function() { 93 94 object.addClass("nbs-flexisel-ul"); 95 object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); 96 object.find("li").addClass("nbs-flexisel-item"); 97 98 if(settings.setMaxWidthAndHeight) { 99 var baseWidth = $(".nbs-flexisel-item > img").width(); 100 var baseHeight = $(".nbs-flexisel-item > img").height(); 101 $(".nbs-flexisel-item > img").css("max-width", baseWidth); 102 $(".nbs-flexisel-item > img").css("max-height", baseHeight); 103 } 104 105 $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object); 106 var cloneContent = object.children().clone(); 107 object.append(cloneContent); 108 }, 109 110 111 /****************************** 112 Set Event Handlers 113 *******************************/ 114 setEventHandlers: function() { 115 116 var listParent = object.parent(); 117 var childSet = object.children(); 118 var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); 119 var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); 120 121 $(window).on("resize", function(event){ 122 123 methods.setResponsiveEvents(); 124 125 var innerWidth = $(listParent).width(); 126 var innerHeight = $(listParent).height(); 127 128 itemsWidth = (innerWidth)/itemsVisible; 129 130 childSet.width(itemsWidth); 131 object.css({'left' : -itemsWidth}); 132 133 var halfArrowHeight = (leftArrow.height())/2; 134 var arrowMargin = (innerHeight/2) - halfArrowHeight; 135 leftArrow.css("top", arrowMargin + "px"); 136 rightArrow.css("top", arrowMargin + "px"); 137 138 }); 139 140 $(leftArrow).on("click", function (event) { 141 methods.scrollLeft(); 142 }); 143 144 $(rightArrow).on("click", function (event) { 145 methods.scrollRight(); 146 }); 147 148 if(settings.pauseOnHover == true) { 149 $(".nbs-flexisel-item").on({ 150 mouseenter: function () { 151 canNavigate = false;
152 }, 153 mouseleave: function () { 154 canNavigate = true; 155 } 156 }); 157 } 158 159 if(settings.autoPlay == true) { 160 161 setInterval(function () { 162 if(canNavigate == true) 163 methods.scrollRight(); 164 }, settings.autoPlaySpeed); 165 } 166 167 }, 168 169 /****************************** 170 Set Responsive Events 171 *******************************/ 172 173 setResponsiveEvents: function() { 174 var contentWidth = $('html').width(); 175 176 if(settings.enableResponsiveBreakpoints == true) { 177 if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) { 178 itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems; 179 } 180 else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) { 181 itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems; 182 } 183 else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) { 184 itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems; 185 } 186 else { 187 itemsVisible = settings.visibleItems; 188 } 189 } 190 }, 191 192 /****************************** 193 Scroll Left 194 *******************************/ 195 196 scrollLeft:function() { 197 198 if(canNavigate == true) { 199 canNavigate = false; 200 201 var listParent = object.parent(); 202 var innerWidth = listParent.width(); 203 204 itemsWidth = (innerWidth)/itemsVisible; 205 206 var childSet = object.children(); 207 208 object.animate({ 209 'left' : "+=" + itemsWidth 210 }, 211 { 212 queue:false, 213 duration:settings.animationSpeed, 214 easing: "linear", 215 complete: function() { 216 childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 217 methods.adjustScroll(); 218 canNavigate = true; 219 } 220 } 221 ); 222 } 223 }, 224 225 /****************************** 226 Scroll Right 227 *******************************/ 228 229 scrollRight:function() { 230 231 if(canNavigate == true) { 232 canNavigate = false; 233 234 var listParent = object.parent(); 235 var innerWidth = listParent.width(); 236 237 itemsWidth = (innerWidth)/itemsVisible; 238 239 var childSet = object.children(); 240 241 object.animate({ 242 'left' : "-=" + itemsWidth 243 }, 244 { 245 queue:false, 246 duration:settings.animationSpeed, 247 easing: "linear", 248 complete: function() { 249 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) 250 methods.adjustScroll(); 251 canNavigate = true; 252 } 253 } 254 ); 255 } 256 }, 257 258 /****************************** 259 Adjust Scroll 260 *******************************/ 261 262 adjustScroll: function() { 263 264 var listParent = object.parent(); 265 var childSet = object.children(); 266 267 var innerWidth = listParent.width(); 268 itemsWidth = (innerWidth)/itemsVisible; 269 childSet.width(itemsWidth); 270 object.css({'left' : -itemsWidth}); 271 } 272 273 }; 274 275 if (methods[options]) { // $("#element").pluginName('methodName', 'arg1', 'arg2'); 276 return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 277 } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 278 return methods.init.apply(this); 279 } else { 280 $.error( 'Method "' + method + '" does not exist in flexisel plugin!'); 281 } 282}; 283 284})(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.