1/* 2 * Enhanced Easy Slider 3 * 4 * Built off of the Easy Slider - jQuery plugin 5 * written by Alen Grakalic 6 * http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider 7 * 8 * enhancements by Joseph Pecoraro 9 * email: [email protected] 10 * http://blog.bogojoker.com 11 * 12 * The Easy Slider Copyrights: 13 * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com) 14 * Dual licensed under the MIT (MIT-LICENSE.txt) 15 * and GPL (GPL-LICENSE.txt) licenses. 16 * 17 * Built for jQuery library 18 * http://jquery.com 19 * 20 */ 21 22/* 23 * Quick Documentation of New Features 24 * 25 * * Non-Autogenerated Pagination - set the autogeneratePagination 26 * option to false in the easySlide options and be sure to provide 27 * id's in the prevId and nextId options. Those provided ids will 28 * unobtrusively get the easySlide actions applied to them. 29 * 30 * * Looping - just set the loop option to true in the easySlide 31 * options and you will be able to navigate forward/backward around 32 * the ends smoothly. 33 * 34 * * Autoplay - just set the autoplayDuration to a non-zero value 35 * in the easySlide options and the content will slide on its own. 36 * The value you provide will only be the value between animations, 37 * so you don't have to compensate for the speed of transitions, 38 * that is handled automatically. Autoplaying works fine with 39 * looping. 40 * 41 * If you have pagination buttons, when the user clicks a button 42 * the autoplay will suspend for a little while. The restartDuration 43 * value specifies the amount of time since the last user 44 * interruption to wait before restarting the autoplay. 45 * 46 * * Hovering - just set hover to true and pagination will trigger 47 * when hovering instead of clicking. The slides will continue to 48 * transition as long as you hover over the pagination element. 49 * Hovering works fine with looping. 50 * 51 * If you want a pause between slides you can set the hoverPause 52 * value to an integer greater than 0. That specifies the time 53 * to wait between transitions. 54 * 55 * * Linear or Swing easing - jQuery offers two different styles 56 * of animations. Just set the easing option to 'linear' or 57 * 'swing' (default)and it will use that easing style. 58 * 59 * * Pauseable - Pause autoplay by hovering over an image. Likewise 60 * you can extend this to pause when hovering the buttons as well. 61 * 62 * * Fade Orientation - Not Vertical or Horizontal Slideing, but Fading! 63 * Just provide orientation: 'fade' for fading to happen. 64 * 65 * * Callbacks - You are allowed to provide your own functions for 66 * events triggered by the slider. You can provide a function 67 * for 'beforeTransition' and 'afterTransition'. Their signature 68 * is as follows: 69 * 70 * function callback( slideNumber, jQuery_li, jQuery_ul ) 71 * ^ ^ ^ 72 * | | | 73 * int of the slide number ----- | | 74 * jQuery wrapper for the now showing <li> -- | 75 * jQuery wrapper for the entire <ul> of all slides --- 76 * 77 * For example, to get the explicit DOM <li> Node you could do 78 * 79 * function after(num, $li, $ul) { 80 * dom_li = $li[0]; 81 * console.log(dom_li); 82 * } 83 * 84 */ 85 86(function($) { 87 88 $.fn.easySlider = function(options){ 89 90 // default configuration properties 91 var defaults = { 92 prevId: 'prevBtn', // id of the element to apply prev rules to 93 nextId: 'nextBtn', // id of the element to apply next rules to 94 prevText: 'PREV', // text for autogenerated prev link 95 nextText: 'NEXT', // text for autogenerated next link 96 autogeneratePagination: false, // will automatically generate pagination links 97 orientation: '', // 'vertical', 'fade', or anything else will assume horizontal
98 speed: 800, // duration of a transition 99 autoplayDuration: 0, // auto-play if non-zero, this is the time between transitions 100 restartDuration: 2500, // time to restart autoplay after a user interupts and autoplay 101 loop: true, // loop around the content 102 hoverPause: 0, // when hovering, the time between transitions 103 hover: false, // on hover instead of onclick 104 easing: null, // jQuery animation settings 'linear' or 'swing' (default) 105 pauseable: true, // pause autoplay when hovering the image 106 pauseButtons: false, // hovering over the cuttons will pause as well 107 beforeTransition: null, // callback before transitioning 108 afterTransition: null // callback after transitioning 109 }; 110 111 var options = $.extend(defaults, options); 112 113 return this.each(function() { 114 115 // Setup Measurements and Options 116 var obj = $(this), 117 totalSlides = $("li", obj).length, 118 slideWidth = obj.width(), 119 slideHeight = obj.height(), 120 lastSlide = totalSlides-1, 121 current = 0; 122 123 // States 124 var vertical = (options.orientation == 'vertical'), 125 fade = (options.orientation == 'fade'), 126 horizontal = (!vertical && !fade), 127 autogen = options.autogeneratePagination, 128 pauseable = options.pauseable, 129 loop = options.loop, 130 speed = options.speed, 131 easing = options.easing, 132 hover = options.hover, 133 hoverPause = options.hoverPause, 134 buttonsPause = options.pauseButtons, 135 restartDuration = options.restartDuration, 136 autoplayDuration = Math.max(options.autoplayDuration,25)+speed, 137 autoplay = (options.autoplayDuration > 0), 138 beforeTransition = options.beforeTransition, 139 afterTransition = options.afterTransition; 140 interval = null, 141 restart = null; 142 143 // Autogenerate Pagination 144 if (autogen) { 145 $(obj).after( '<span id="'+options.prevId+'"><a class="sliderBarArrow arrow_LI" href=\"javascript:void(0);\">'+options.prevText+'</a></span> '+ 146 '<span id="'+options.nextId+'"><a class="sliderBarArrow arrow_RA" href=\"javascript:void(0);\">'+options.nextText+'</a></span>'); 147 } 148 149 150 151 // Important Elements 152 var $ul = $("ul", obj), 153 $next = $("#"+options.nextId), 154 $prev = $("#"+options.prevId); 155 156 // Loop - Duplicate the First Slide onto the end 157 if (loop) { 158 $ul.append( $("li:first", obj).clone() ); 159 totalSlides += 1; 160 lastSlide += 1; 161 } 162 163 // Horizontal - Make them float left and set the width of the ul (for all slides) 164 if (horizontal) { 165 $("li", obj).css('float','left'); 166 $ul.css('width', totalSlides * slideWidth); 167 } 168 169 // Fade - Hide all but the first slide so they can fadeIn from nothing 170 if (fade) { 171 $ul.find("li:not(:first)").hide(); 172 } 173 174 // Reusable Closure to pause the autoplay timer 175 var pauseFunc = function() { 176 clearInterval(interval); 177 clearTimeout(restart); 178 } 179 180 // Reusable Closure to restart the autoplay timers using the restartDuration 181 var restartFunc = function() { 182 restart = setTimeout(function() { 183 interval = setInterval(auto, autoplayDuration); 184 }, restartDuration); 185 }; 186 187 // Pauseable (should be autoplay only, but would have no effect otherwise) 188 // On Hover: cancel the autoplay timers 189 // On Leave: restart the autoplay timers 190 if ( pauseable && autoplay ) { 191 $(obj).hover(pauseFunc, restartFunc); 192 if ( buttonsPause ) { 193 $next.hover(pauseFunc, restartFunc); 194 $prev.hover(pauseFunc, restartFunc); 195 } 196 } 197 198 // Add Actions to Next and Prev Buttons 199 // If Not Hover Mode made it click(), if it is Hover Mode, make it hover() 200 // When in autoplay mode make next/prev reset the autoplay timers 201 if ( !hover ) { 202 203 $next.click(function(){ 204 if (autoplay) { 205 pauseFunc(); 206 if ( !buttonsPause ) { 207 restartFunc(); 208 } 209 }; 210 animate("next"); 211 }); 212 213 $prev.click(function(){ 214 if (autoplay) { 215 pauseFunc(); 216 if ( !buttonsPause ) { 217 restartFunc(); 218 } 219 }; 220 animate("prev"); 221 }); 222 223 } else { 224 225 var hoverNext = false, 226 hoverPrev = false, 227 isAnimating = false; 228 229 $next.hover( 230 function() { 231 var tfunc = arguments.callee; 232 hoverNext = true; 233 if ( !isAnimating ) { 234 isAnimating = true; 235 animate("next", function() { 236 isAnimating = false; 237 if ( hoverNext ) { tfunc(); } 238 }); 239 } 240 }, 241 function() { 242 hoverNext = false; 243 } 244 ); 245 246 $prev.hover( 247 function() { 248 var tfunc = arguments.callee; 249 hoverPrev = true; 250 if ( !isAnimating ) { 251 isAnimating = true; 252 animate("prev", function() { 253 isAnimating = false; 254 if ( hoverPrev ) { tfunc(); } 255 }); 256 } 257 }, 258 function() { 259 hoverPrev = false; 260 } 261 ); 262 263 } 264 265 266 // 267 // Enclosed Slide Animation 268 // 269 // This handles all of the sliding/faiding animation 270 // @param dir the direction "next" or "prev" 271 // @param cb the callback function 272 // 273 function animate(dir, cb) { 274 275 // Before Transition, Guarantee 276 if ( beforeTransition ) { 277 beforeTransition( current, $ul.find('li:eq('+current+')'), $ul ); 278 } 279 280 281 // After Transition, Guarantee 282 // Setup the next have 283 // NOTE: That current will be the new value when this is called 284 // due to it being a closure! 285 var newcb = function() { 286 if ( cb != null ) { 287 ( hoverPause == 0 ) ? cb() : setTimeout(cb, hoverPause); 288 } 289 if ( afterTransition ) { 290 afterTransition( current, $ul.find('li:eq('+current+')'), $ul ); 291 } 292 } 293 294 295 // cur, nex, and update "current" 296 // cur is the old current slide, the slide we are currently on 297 // nex is the new current slide, the slide we are transitioning too 298 // current is a global value that gets updated right here 299 var cur = current; 300 if ( loop ) { 301 if ( dir == 'next' ) { 302 current = (current==lastSlide) ? 1 : current+1; 303 } else { 304 current = (current==0) ? lastSlide-1 : current-1; 305 } 306 } else { 307 if (dir == "next") { 308 current = (current>=lastSlide) ? lastSlide : current+1; 309 } else { 310 current = (current<=0) ? 0 : current-1; 311 } 312 } 313 var nex = current; 314 315 316 // Special Case for looping 317 // If at the end and going forward, instantaneous jump to the first slide 318 // If at the start and going backward, instantaneous jump to the last slide 319 // NOTE: The instantaneous jump is an animate() so jQuery handles it in tune 320 // with the rest of the animations, and is -1 (not 0) time so its instant. 321 if ( loop ) { 322 if ( (dir == "next") && (cur == lastSlide) ) { 323 (vertical) ? 324 $ul.animate({marginTop:0}, -1) : 325 $ul.animate({marginLeft:0}, -1);
326 } else if ( (dir == "prev") && (cur == 0) ) { 327 (vertical) ? 328 $ul.animate({marginTop:(totalSlides-1)*slideHeight*-1}, -1) : 329 $ul.animate({marginLeft:(totalSlides-1)*slideWidth*-1}, -1); 330 } 331 } 332 333 334 // Dispatch jQuery Animation for the transition 335 // Slide horizontally, vertically, or fade 336 if ( horizontal ) { 337 $ul.animate( { marginLeft: (nex*slideWidth*-1) }, speed, easing, newcb ); 338 } else if ( vertical ) { 339 $ul.animate( { marginTop: (nex*slideHeight*-1) }, speed, easing, newcb ); 340 } else { 341 var curli = 'li:eq(' + cur + ')'; 342 var nexli = 'li:eq(' + nex + ')'; 343 $ul.find(curli).fadeOut("slow", function() { 344 $ul.find(nexli).fadeIn("slow", newcb); 345 }); 346 } 347 348 349 // Correctly show the Next/Prev links 350 // When looping they always show, so we can ignore that 351 // If at the end, hide the next link 352 // If at the start, hide the previous link 353 // Any other case we can show both links 354 if ( !loop ) { 355 if ( nex <= 0 ) { 356 $prev.fadeOut(); 357 } else if ( nex >= lastSlide ) { 358 $next.fadeOut(); 359 } else { 360 $next.fadeIn(); 361 $prev.fadeIn(); 362 } 363 } 364 365 }; 366 367 368 // 369 // Autoplay 370 // 371 // Note that autoplayDuration already has the transitionDuration 372 // added to it (to prevent doing the addition over and over). 373 // However that means that the first invokation would take 374 // autoplayDuration+transitionDuration. We remove that extra 375 // wait by first doing a single setTimeout with the correct 376 // time, followed by the correct setInterval. 377 // 378 if ( autoplay ) { 379 var auto = function() { 380 animate('next'); 381 if ( !loop && current>=lastSlide ) { 382 clearInterval(interval); 383 } 384 } 385 restart = setTimeout(function() { 386 auto(); 387 interval = setInterval(auto, autoplayDuration); 388 }, autoplayDuration-speed); 389 } 390 391 392 // Initially Hide both buttons 393 $next.hide(); 394 $prev.hide(); 395 396 // Finally, Display the Next Link if more then one slide 397 if (totalSlides>1) { 398 $next.fadeIn(); 399 if(loop) { $prev.fadeIn(); } 400 } 401 402 }); 403 404 }; 405 406})(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.