1/**� 2 * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.� 3 * @requires jQuery v1.2 or above� 4 *� 5 * http://gmarwaha.com/jquery/jcarousellite/� 6 *� 7 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)� 8 * Dual licensed under the MIT and GPL licenses:� 9 * http://www.opensource.org/licenses/mit-license.php� 10 * http://www.gnu.org/licenses/gpl.html� 11 *� 12 * Version: 1.0.1� 13 * Note: Requires jquery 1.2 or above from version 1.0.1� 14 */� 15� 16/**� 17 * Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.� 18 *� 19 * The HTML markup that is used to build the carousel can be as simple as...� 20 *� 21 * <div class="carousel">� 22 * <ul>� 23 * <li><img src="image/1.jpg" alt="1"></li>� 24 * <li><img src="image/2.jpg" alt="2"></li>� 25 * <li><img src="image/3.jpg" alt="3"></li>� 26 * </ul>� 27 * </div>� 28 *� 29 * As you can see, this snippet is nothing but a simple div containing an unordered list of images.� 30 * You don't need any special "class" attribute, or a special "css" file for this plugin.� 31 * I am using a class attribute just for the sake of explanation here.� 32 *� 33 * To navigate the elements of the carousel, you need some kind of navigation buttons.� 34 * For example, you will need a "previous" button to go backward, and a "next" button to go forward.� 35 * This need not be part of the carousel "div" itself. It can be any element in your page.� 36 * Lets assume that the following elements in your document can be used as next, and prev buttons...� 37 *� 38 * <button class="prev"><<</button>� 39 * <button class="next">>></button>� 40 *� 41 * Now, all you need to do is call the carousel component on the div element that represents it, and pass in the� 42 * navigation buttons as options.� 43 *� 44 * $(".carousel").jCarouselLite({� 45 * btnNext: ".next",� 46 * btnPrev: ".prev"� 47 * });� 48 *� 49 * That's it, you would have now converted your raw div, into a magnificient carousel.� 50 *� 51 * There are quite a few other options that you can use to customize it though.� 52 * Each will be explained with an example below.� 53 *� 54 * @param an options object - You can specify all the options shown below as an options object param.� 55 *� 56 * @option btnPrev, btnNext : string - no defaults� 57 * @example� 58 * $(".carousel").jCarouselLite({� 59 * btnNext: ".next",� 60 * btnPrev: ".prev"� 61 * });� 62 * @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.� 63 *� 64 * @option btnGo - array - no defaults� 65 * @example� 66 * $(".carousel").jCarouselLite({� 67 * btnNext: ".next",� 68 * btnPrev: ".prev",� 69 * btnGo: [".0", ".1", ".2"]� 70 * });� 71 * @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on� 72 * the item number within the carousel, you can use this option. Just supply an array of selectors for each element� 73 * in the carousel. The index of the array represents the index of the element. What i mean is, if the� 74 * first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel� 75 * will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed� 76 * interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding� 77 * any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.� 78 * The best part is that, the tab will "slide" based on the provided effect. :-)� 79 *� 80 * @option mouseWheel : boolean - default is false� 81 * @example� 82 * $(".carousel").jCarouselLite({� 83 * mouseWheel: true� 84 * });� 85 * @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.� 86 * To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.� 87 * Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel� 88 * using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation� 89 * as well. They complement each other. To use both together, just supply the options required for both as shown below.� 90 * @example� 91 * $(".carousel").jCarouselLite({� 92 * btnNext: ".next",� 93 * btnPrev: ".prev",� 94 * mouseWheel: true� 95 * });� 96 *� 97 * @option auto : number - default is null, meaning autoscroll is disabled by default� 98 * @example� 99 * $(".carousel").jCarouselLite({� 100 * auto: 800,� 101 * speed: 500� 102 * });� 103 * @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.� 104 * The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.� 105 * Specify this value and magically your carousel will start auto scrolling.� 106 *� 107 * @option speed : number - 200 is default� 108 * @example� 109 * $(".carousel").jCarouselLite({� 110 * btnNext: ".next",� 111 * btnPrev: ".prev",�
112 * speed: 800� 113 * });� 114 * @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with� 115 * different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.� 116 *� 117 * @option easing : string - no easing effects by default.� 118 * @example� 119 * $(".carousel").jCarouselLite({� 120 * btnNext: ".next",� 121 * btnPrev: ".prev",� 122 * easing: "bounceout"� 123 * });� 124 * @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,� 125 * the carousel will slide based on the provided easing effect.� 126 *� 127 * @option vertical : boolean - default is false� 128 * @example� 129 * $(".carousel").jCarouselLite({� 130 * btnNext: ".next",� 131 * btnPrev: ".prev",� 132 * vertical: true� 133 * });� 134 * @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and� 135 * prev buttons will slide the items vertically as well. The default is false, which means that the carousel will� 136 * display horizontally. The next and prev items will slide the items from left-right in this case.� 137 *� 138 * @option circular : boolean - default is true� 139 * @example� 140 * $(".carousel").jCarouselLite({� 141 * btnNext: ".next",� 142 * btnPrev: ".prev",� 143 * circular: false� 144 * });� 145 * @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last� 146 * element, you will automatically slide to the first element and vice versa. If you set circular to false, then� 147 * if you click on the "next" button after you reach the last element, you will stay in the last element itself� 148 * and similarly for "previous" button and first element.� 149 *� 150 * @option visible : number - default is 3� 151 * @example� 152 * $(".carousel").jCarouselLite({� 153 * btnNext: ".next",� 154 * btnPrev: ".prev",� 155 * visible: 4� 156 * });� 157 * @desc This specifies the number of items visible at all times within the carousel. The default is 3.� 158 * You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the� 159 * last item half visible. This gives you the effect of showing the user that there are more images to the right.� 160 *� 161 * @option start : number - default is 0� 162 * @example� 163 * $(".carousel").jCarouselLite({� 164 * btnNext: ".next",� 165 * btnPrev: ".prev",� 166 * start: 2� 167 * });� 168 * @desc You can specify from which item the carousel should start. Remember, the first item in the carousel� 169 * has a start of 0, and so on.� 170 *� 171 * @option scrool : number - default is 1� 172 * @example� 173 * $(".carousel").jCarouselLite({� 174 * btnNext: ".next",� 175 * btnPrev: ".prev",� 176 * scroll: 2� 177 * });� 178 * @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By� 179 * default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll� 180 * 2 items when you click the next or previous buttons.� 181 *�
182 * @option beforeStart, afterEnd : function - callbacks� 183 * @example� 184 * $(".carousel").jCarouselLite({� 185 * btnNext: ".next",� 186 * btnPrev: ".prev",� 187 * beforeStart: function(a) {� 188 * alert("Before animation starts:" + a);� 189 * },� 190 * afterEnd: function(a) {� 191 * alert("After animation ends:" + a);� 192 * }� 193 * });� 194 * @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can� 195 * register these 2 callbacks. The functions will be passed an argument that represents an array of elements that� 196 * are visible at the time of callback.� 197 *� 198 *� 199 * @cat Plugins/Image Gallery� 200 * @author Ganeshji Marwaha/[email protected]� 201 */� 202� 203(function($) { // Compliant with jquery.noConflict()� 204$.fn.jCarouselLite = function(o) {� 205 o = $.extend({� 206 btnPrev: null,� 207 btnNext: null,� 208 btnGo: null,� 209 mouseWheel: false,� 210 auto: null,� 211 hoverPause: false,� 212� 213 speed: 200,� 214 easing: null,� 215� 216 vertical: false,� 217 circular: true,� 218 visible: 3,� 219 start: 0,� 220 scroll: 1,� 221� 222 beforeStart: null,� 223 afterEnd: null� 224 }, o || {});� 225� 226 return this.each(function() { // Returns the element collection. Chainable.� 227� 228 var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";� 229 var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;� 230� 231 if(o.circular) {� 232 ul.prepend(tLi.slice(tl-v+1).clone())� 233 .append(tLi.slice(0,o.scroll).clone());� 234 o.start += v-1;� 235 }� 236� 237 var li = $("li", ul), itemLength = li.size(), curr = o.start;� 238 div.css("visibility", "visible");� 239� 240 li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});� 241 ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});� 242 div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});� 243� 244 var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation� 245 var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)� 246 var divSize = liSize * v; // size of entire div(total length for just the visible items)� 247� 248 li.css({width: li.width(), height: li.height()});� 249 ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));� 250� 251 div.css(sizeCss, divSize+"px");
251 // Width of the DIV. length of visible images� 252� 253 if(o.btnPrev) {� 254 $(o.btnPrev).click(function() {� 255 return go(curr-o.scroll);� 256 });� 257 if(o.hoverPause) {� 258 $(o.btnPrev).hover(function(){stopAuto();}, function(){startAuto();});� 259 }� 260 }� 261� 262� 263 if(o.btnNext) {� 264 $(o.btnNext).click(function() {� 265 return go(curr+o.scroll);� 266 });� 267 if(o.hoverPause) {� 268 $(o.btnNext).hover(function(){stopAuto();}, function(){startAuto();});� 269 }� 270 }� 271� 272 if(o.btnGo)� 273 $.each(o.btnGo, function(i, val) {� 274 $(val).click(function() {� 275 return go(o.circular ? o.visible+i : i);� 276 });� 277 });� 278� 279 if(o.mouseWheel && div.mousewheel)� 280 div.mousewheel(function(e, d) {� 281 return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);� 282 });� 283� 284 var autoInterval;� 285� 286 function startAuto() {� 287 stopAuto();� 288 autoInterval = setInterval(function() {� 289 go(curr+o.scroll);� 290 }, o.auto+o.speed);� 291 };� 292� 293 function stopAuto() {� 294 clearInterval(autoInterval);� 295 };� 296� 297 if(o.auto) {� 298 if(o.hoverPause) {� 299 div.hover(function(){stopAuto();}, function(){startAuto();});� 300 }� 301 startAuto();� 302 };� 303� 304 function vis() {� 305 return li.slice(curr).slice(0,v);� 306 };� 307� 308 function go(to) {� 309 if(!running) {� 310� 311 if(o.beforeStart)� 312 o.beforeStart.call(this, vis());� 313� 314 if(o.circular) { // If circular we are in first or last, then goto the other end� 315 if(to<0) { // If before range, then go around� 316 ul.css(animCss, -( (curr + tl) * liSize)+"px");� 317 curr = to + tl;� 318 } else if(to>itemLength-v) { // If beyond range, then come around� 319 ul.css(animCss, -( (curr - tl) * liSize ) + "px" );� 320 curr = to - tl;� 321 } else curr = to;� 322 } else { // If non-circular and to points to first or last, we just return.� 323 if(to<0 || to>itemLength-v) return;� 324 else curr = to;� 325 } // If neither overrides it, the curr will still be "to" and we can proceed.� 326� 327 running = true;� 328� 329 ul.animate(� 330 animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,� 331 function() {� 332 if(o.afterEnd)� 333 o.afterEnd.call(this, vis());� 334 running = false;� 335 }� 336 );� 337 // Disable buttons when the carousel reaches the last/first, and enable when not� 338 if(!o.circular) {� 339 $(o.btnPrev + "," + o.btnNext).removeClass("disabled");� 340 $( (curr-o.scroll<0 && o.btnPrev)� 341 ||� 342 (curr+o.scroll > itemLength-v && o.btnNext)� 343 ||� 344 []� 345 ).addClass("disabled");� 346 }� 347� 348 }� 349 return false;� 350 };� 351 });� 352};� 353� 354function css(el, prop) {� 355 return parseInt($.css(el[0], prop)) || 0;� 356};� 357function width(el) {� 358 return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');� 359};� 360function height(el) {� 361 return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');� 362};� 363� 364})(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.