1/** 2 * Slider (or carousel) that supports "Slide", "Crossfade", "Fade", 3 * "HTML5 Rotate", "HTML5 Scale" and "Carousel" effects. Flexible, secure 4 * for html layout (do not changes structure of HTML) and very simple to use. 5 * 6 * The plugin supports Responsive design, images Preloading, Lazy Load and Ajax. 7 * Any HTML can be used as slide content (not only images). 8 * 9 * If the Mousewheel plugin has been included on the page then 10 * the slider will also respond to the mouse wheel. (Set "mousewheel" option as "true") 11 * 12 * @name jQuery ulSlide plugin 13 * @license GPL 14 * @version 1.5.5 15 * @date Dec 02th, 2013 16 * @category jQuery plugin 17 * @author Yevhen Kotelnytskyi ([email protected]) 18 * @copyright (c) 2011 - 2013 Yevhen Kotelnytskyi (http://4coder.info/en/) 19 * @example Visit http://4coder.info/en/code/jquery-plugins/ulslide/ for more informations about this jQuery plugin 20 */ 21(function($) { 22 // --- CSS Hook "uslTransformRotateY" and "uslTransformTranslateZ" 23 function setUslTransform(elem) { 24 var uslTransformRotateY = $.data( elem, 'uslTransformRotateY' ); 25 var uslTransformTranslateZ = $.data( elem, 'uslTransformTranslateZ' ); 26 27 var transform = ''; 28 if (uslTransformRotateY !== undefined) 29 transform += ' rotateY('+uslTransformRotateY+'deg) '; 30 31 if (uslTransformTranslateZ !== undefined) 32 transform += ' translateZ('+uslTransformTranslateZ+'px) '; 33 34 $(elem).css({ 35 '-webkit-transform': transform, 36 'transform': transform 37 }); 38 } 39 40 $.cssHooks.uslTransformRotateY = { 41 set: function(elem, val, unit) { 42 $.data( elem, 'uslTransformRotateY', parseInt(val) ); 43 setUslTransform(elem); 44 }, 45 get: function(elem, computed) { 46 var uslTransformRotateY = $.data( elem, 'uslTransformRotateY' ); 47 var val = uslTransformRotateY ? uslTransformRotateY : 0; 48 return val; 49 } 50 }; 51 52 $.cssHooks.uslTransformTranslateZ = { 53 set: function(elem, val, unit) { 54 $.data( elem, 'uslTransformTranslateZ', parseInt(val) ); 55 setUslTransform(elem); 56 }, 57 get: function(elem, computed) { 58 var uslTransformTranslateZ = $.data( elem, 'uslTransformTranslateZ' ); 59 var val = uslTransformTranslateZ ? uslTransformTranslateZ : 0; 60 return val; 61 } 62 }; 63 64 $.fx.step.uslTransformRotateY = function( fx ) { 65 $.cssHooks.uslTransformRotateY.set( fx.elem, fx.now, fx.unit); 66 }; 67 68 $.fx.step.uslTransformTranslateZ = function( fx ) { 69 $.cssHooks.uslTransformTranslateZ.set( fx.elem, fx.now, fx.unit); 70 }; 71 // --- end CSS Hook --- 72 73 74 // --- Effects --- 75 ulslideEffects = { 76 //------------------------------------------------------------------------------- 77 flip3D: { 78 init: function($elem, settings) { 79 if (settings['debug']) 80 console.log('ulslideEffects.flip3D.init();'); //*** 81 82 $elem.css({ 83 'overflow': 'visible', 84 'transformStyle': 'preserve-3d' 85 }); 86 87 $('> *', $elem[0]).each(function(i) { 88 var styles = { 89 'uslTransformRotateY': '0deg', 90 'transformStyle': 'preserve-3d', 91 'backface-visibility': 'hidden', 92 '-webkit-backface-visibility': 'hidden', 93 'top': '50%', 94 'left': '50%' 95 }; 96 97 if (i == settings['current']) 98 styles.display = 'block'; 99 else styles.display = 'none'; 100 101 $(this).css(styles); 102 }); 103 }, 104 resize: function($elem, settings) { 105 if (settings['debug']) 106 console.log('ulslideEffects.flip3D.resize();'); //*** 107 108 $elem.css({ 109 'perspective': settings['perspective'] + 'px', 110 }); 111 112 $('> *', $elem[0]).each(function(i) { 113 var styles = { 114 'margin': ('-' + (settings['height']/2) + 'px 0 0' + '-' + (settings['width']/2) + 'px') 115 }; 116 $(this).css(styles); 117 }); 118 }, 119 slide: function($elem, settings, $prevElem, $currentElem, callback) { 120 if (settings['debug']) 121 console.log('ulslideEffects.flip3D.slide();'); //*** 122 123 if (settings['direction'] == 'f') { 124 var degs = { 125 prev_start: '0deg', 126 prev_finish: 180, 127 current_start: '180deg', 128 current_finish: 360 129 }; 130 } 131 else { 132 var degs = { 133 prev_start: '360deg', 134 prev_finish: 180, 135 current_start: '180deg', 136 current_finish: 0 137 }; 138 } 139 140 $prevElem.css({ 141 uslTransformRotateY: degs.prev_start, 142 opacity: 1, 143 display: 'block' 144 }); 145 146 $currentElem.css({ 147 uslTransformRotateY: degs.current_start, 148 opacity: 1, 149 display: 'block' 150 }); 151 152 $prevElem.animate({ 153 'uslTransformRotateY': degs.prev_finish, 154 'opacity': 0 155 },{ 156 duration: settings['duration'], 157 easing: settings['easing'] 158 }); 159 160 $currentElem.animate({ 161 'uslTransformRotateY': degs.current_finish, 162 'opacity': 1 163 },{ 164 duration: settings['duration'], 165 easing: settings['easing'], 166 complete: function(){ 167 callback(); 168 } 169 }); 170 } 171 }, 172 //------------------------------------------------------------------------------- 173 cube3D: { 174 init: function($elem, settings) { 175 if (settings['debug']) 176 console.log('ulslideEffects.cube3D.init();'); //*** 177 178 $elem.css({ 179 'transformStyle': 'preserve-3d', 180 'overflow': 'visible' 181 }); 182 183 $('> *', $elem[0]).each(function(i) { 184 var styles = { 185 'uslTransformRotateY': '0deg', 186 'transformStyle': 'preserve-3d', 187 'backface-visibility': 'hidden',
188 '-webkit-backface-visibility': 'hidden', 189 'top': '50%', 190 'left': '50%' 191 }; 192 193 if (i == settings['current']) 194 styles.display = 'block'; 195 else styles.display = 'none'; 196 197 $(this).css(styles); 198 }); 199 }, 200 resize: function($elem, settings) { 201 if (settings['debug']) 202 console.log('ulslideEffects.cube3D.resize();'); //*** 203 204 var scale = (settings['perspective'] - settings['width'] / 2) / settings['perspective']; 205 $elem.css({ 206 'perspective': settings['perspective'] + 'px', 207 'transform': 'scale('+scale+')', 208 '-webkit-transform': 'scale('+scale+')' 209 }); 210 211 $('> *', $elem[0]).each(function(i) { 212 var styles = { 213 'uslTransformTranslateZ': (settings['width']/2) + 'px', 214 'margin': ('-' + (settings['height']/2) + 'px 0 0' + '-' + (settings['width']/2) + 'px') 215 }; 216 $(this).css(styles); 217 }); 218 }, 219 slide: function($elem, settings, $prevElem, $currentElem, callback) { 220 if (settings['debug']) 221 console.log('ulslideEffects.cube3D.slide();'); //*** 222 223 if (settings['direction'] == 'f') { 224 var degs = { 225 prev_start: '0deg', 226 prev_finish: 90, 227 current_start: '-90deg', 228 current_finish: 0 229 }; 230 } 231 else { 232 var degs = { 233 prev_start: '0deg', 234 prev_finish: -90, 235 current_start: '90deg', 236 current_finish: 0 237 }; 238 } 239 240 $prevElem.css({ 241 uslTransformRotateY: degs.prev_start, 242 display: 'block' 243 }); 244 245 $currentElem.css({ 246 uslTransformRotateY: degs.current_start, 247 display: 'block' 248 }); 249 250 $prevElem.animate({ 251 'uslTransformRotateY': degs.prev_finish 252 },{ 253 duration: settings['duration'], 254 easing: settings['easing'] 255 }); 256 257 $currentElem.animate({ 258 'uslTransformRotateY': degs.current_finish 259 },{ 260 duration: settings['duration'], 261 easing: settings['easing'], 262 complete: callback 263 }); 264 } 265 }, 266 //------------------------------------------------------------------------------- 267 slide: { 268 init: function($elem, settings) { 269 if (settings['debug']) 270 console.log('ulslideEffects.slide.init();'); //*** 271 }, 272 resize: function($elem, settings) { 273 if (settings['debug']) 274 console.log('ulslideEffects.slide.resize();'); //*** 275 }, 276 slide: function($elem, settings, $prevElem, $currentElem, callback) { 277 if (settings['debug']) 278 console.log('ulslideEffects.slide.slide();'); //*** 279 280 var axis = settings['effect']['axis']; 281 282 // Randomize axis 283 if (axis == 'r') 284 axis = $elem.array_rand(['x', 'y']); 285 286 if (axis == 'x') { 287 if (settings['prev'] != settings['current']){ 288 if (settings['direction'] == 'f'){ 289 $prevElem.animate({ 290 'left': -(settings['width'] + settings['effect']['distance']) 291 }, settings['duration'], settings['easing']); 292 $currentElem.css('left', settings['width'] + settings['effect']['distance']); 293 } 294 else{ 295 $prevElem.animate({ 296 'left': settings['width'] + settings['effect']['distance'] 297 }, settings['duration'], settings['easing']); 298 $currentElem.css('left', -(settings['width'] + settings['effect']['distance'])); 299 } 300 } 301 302 $currentElem.css('top', 0); 303 $prevElem.css('top', 0); 304 305 $currentElem.animate({ 306 'left': 0 307 }, settings['duration'], settings['easing'], callback 308 ); 309 } 310 else { 311 if (settings['prev'] != settings['current']) { 312 if (settings['direction'] == 'f') { 313 $prevElem.animate({ 314 'top': $elem[0].currentHeight + settings['effect']['distance'] 315 }, settings['duration'], settings['easing'], function() { 316 $prevElem.css('left', -(settings['width'] + settings['effect']['distance'])); 317 }); 318 $currentElem.css('top', -(settings['prevHeight'] + settings['effect']['distance'])); 319 } 320 else { 321 $prevElem.animate({ 322 'top': -($elem[0].currentHeight + settings['effect']['distance']) 323 }, settings['duration'], settings['easing'], function(){ 324 $prevElem.css('left', -(settings['width'] + settings['effect']['distance'])); 325 }); 326 $currentElem.css('top', settings['prevHeight'] + settings['effect']['distance']); 327 } 328 } 329 330 $currentElem.css('left', 0); 331 $prevElem.css('left', 0); 332 333 $currentElem.animate({ 'top': 0 }, 334 settings['duration'], 335 settings['easing'], 336 callback); 337 } 338 } 339 }, 340 //------------------------------------------------------------------------------- 341 fade: { 342 init: function($elem, settings) { 343 if (settings['debug']) 344 console.log('ulslideEffects.fade.init();'); //*** 345 }, 346 resize: function($elem, settings) { 347 if (settings['debug']) 348 console.log('ulslideEffects.fade.resize();'); //*** 349 }, 350 slide: function($elem, settings, $prevElem, $currentElem, callback) { 351 if (settings['debug']) 352 console.log('ulslideEffects.fade.slide();'); //*** 353 354 $currentElem.css('display', 'none'); 355 $currentElem.css('left', 0); 356 $currentElem.css('top', 0); 357 358 $prevElem.fadeOut(settings['duration'], function(){ 359 $prevElem.css('display', 'none'); 360 $currentElem.fadeIn(settings['duration'], callback); 361 }); 362 } 363 }, 364 //------------------------------------------------------------------------------- 365 crossfade: { 366 init: function($elem, settings) { 367 if (settings['debug']) 368 console.log('ulslideEffects.crossfade.init();'); //*** 369 }, 370 resize: function($elem, settings) { 371 if (settings['debug']) 372 console.log('ulslideEffects.crossfade.resize();'); //*** 373 }, 374 slide: function($elem, settings, $prevElem, $currentElem, callback) { 375 if (settings['debug']) 376 console.log('ulslideEffects.crossfade.slide();'); //*** 377 378 $currentElem.css('display', 'none'); 379 $currentElem.css('left', 0); 380 $currentElem.css('top', 0); 381 382 $prevElem.fadeOut(settings['duration'], function(){ 383 $prevElem.css('display', 'none'); 384 }); 385 $currentElem.fadeIn(settings['duration'], callback); 386 } 387 }, 388 //------------------------------------------------------------------------------- 389 rotate: { 390 init: function($elem, settings) { 391 if (settings['debug'])
392 console.log('ulslideEffects.rotate.init();'); //*** 393 394 $elem.css('overflow', 'visible'); 395 }, 396 resize: function($elem, settings) { 397 if (settings['debug']) 398 console.log('ulslideEffects.rotate.resize();'); //*** 399 }, 400 slide: function($elem, settings, $prevElem, $currentElem, callback) { 401 if (settings['debug']) 402 console.log('ulslideEffects.rotate.slide();'); //*** 403 404 var rotate_pref = settings['direction'] == 'f' ? '-' : ''; 405 406 $currentElem.animate({ 407 'rotate': rotate_pref + '90deg', 408 'scale': '0.01', 409 'opacity': 0.3, 410 'z-index': 2, 411 'left': 0, 412 'top': 0 413 }, 0); 414 415 $prevElem.css('z-index', 1); 416 417 $prevElem.animate({ 418 'opacity': 0 419 }, 420 settings['duration'], 421 settings['easing']); 422 423 $currentElem.animate({ 424 'rotate': rotate_pref + '360deg', 425 'scale': '1', 426 'opacity': 1 427 }, 428 settings['duration'], 429 settings['easing'], 430 callback); 431 } 432 }, 433 //------------------------------------------------------------------------------- 434 scale: { 435 init: function($elem, settings) { 436 if (settings['debug']) 437 console.log('ulslideEffects.scale.init();'); //*** 438 }, 439 resize: function($elem, settings) { 440 if (settings['debug']) 441 console.log('ulslideEffects.scale.resize();'); //*** 442 }, 443 slide: function($elem, settings, $prevElem, $currentElem, callback) { 444 if (settings['debug']) 445 console.log('ulslideEffects.scale.slide();'); //*** 446 447 if (settings['direction'] == 'f') { 448 var rotate_pref = '-'; 449 var rotate_pref_i = ''; 450 } 451 else { 452 var rotate_pref = ''; 453 var rotate_pref_i = '-'; 454 } 455 456 $currentElem.animate({ 457 'scale': '0.05', 458 'opacity': 0.3, 459 'z-index': 2, 460 'left': 0, 461 'top': 0, 462 'marginLeft': rotate_pref_i + (settings['fwidth']/2)+'px' 463 }, 0); 464 465 $prevElem.css('z-index', 1); 466 467 $prevElem.animate({ 468 'scale': '0.01', 469 'opacity': 0, 470 'marginLeft': rotate_pref + (settings['fwidth']/2)+'px' 471 }, 472 settings['duration'], 473 settings['easing']); 474 475 $currentElem.animate({ 476 'scale': '1', 477 'opacity': 1, 478 'marginLeft': '0px' 479 }, 480 settings['duration'], 481 settings['easing'], 482 callback); 483 } 484 }, 485 //------------------------------------------------------------------------------- 486 carousel: { 487 init: function($elem, settings) { 488 if (settings['debug']) 489 console.log('ulslideEffects.carousel.init();'); //*** 490 491 $('> *', $elem[0]).each(function(i) { 492 var ci = $elem.carouselGetFramePos(i, settings['current']); 493 if (settings['effect']['axis'] == 'y') { 494 $(this).css({ 495 'top': (ci * settings['fheight']), 496 'left': '0' 497 }); 498 } 499 else { 500 $(this).css({ 501 'top': '0', 502 'left': (ci * settings['fwidth']) 503 }); 504 } 505 }); 506 507 if (settings['effect']['axis'] == 'y') { 508 $elem.css('width', settings['width']); 509 $elem.css('height', settings['fheight'] * settings['effect']['showCount'] - settings['effect']['distance']); 510 } 511 else { 512 $elem.css('width', settings['fwidth'] * settings['effect']['showCount'] - settings['effect']['distance']); 513 $elem.css('height', settings['height']); 514 } 515 }, 516 resize: function($elem, settings) { 517 if (settings['debug']) 518 console.log('ulslideEffects.carousel.resize();'); //*** 519 520 if (settings['effect']['axis'] == 'y') { 521 $elem.css('width', settings['width']); 522 $elem.css('height', settings['fheight'] * settings['effect']['showCount'] - settings['effect']['distance']); 523 } 524 else { 525 $elem.css('width', settings['fwidth'] * settings['effect']['showCount'] - settings['effect']['distance']); 526 $elem.css('height', settings['height']); 527 } 528 529 $('> *', $elem[0]).each(function(i) { 530 var ci = $elem.carouselGetFramePos(i, settings['current']); 531 if (settings['effect']['axis'] == 'y') { 532 $(this).css({ 533 'top': (ci * settings['fheight']), 534 'left': '0' 535 }); 536 } 537 else { 538 $(this).css({ 539 'top': '0', 540 'left': (ci * settings['fwidth']) 541 }); 542 } 543 }); 544 }, 545 slide: function($elem, settings, $prevElem, $currentElem, callback) { 546 if (settings['debug']) 547 console.log('ulslideEffects.carousel.slide();'); //*** 548 549 $('> *', $elem[0]).each(function(i){ 550 liel = $(this); 551 var ci = $elem.carouselGetFramePos(i, settings['current']); 552 if (settings['direction'] == 'f') 553 var pi = $elem.carouselGetFramePos(i, settings['current'] - 1); 554 else var pi = $elem.carouselGetFramePos(i, settings['current'] + 1); 555 556 if (settings['effect']['axis'] == 'y') { 557 if ((settings['direction'] == 'f') && (ci == 0)) { 558 liel.css('top', (-1 * settings['fheight'])); 559 liel.animate({'top': ci * settings['fheight']}, settings['duration'], settings['easing']); 560 } 561 else if ((settings['direction'] == 'f') && (pi + 1 == settings['effect']['showCount'])) { 562 liel.animate({'top': (settings['effect']['showCount']) * settings['fheight']}, settings['duration'], settings['easing']); 563 } 564 else if ((settings['direction'] == 'b') && (pi == 0)) { 565 liel.animate({'top': -1 * settings['fheight']}, settings['duration'], settings['easing']); 566 } 567 else if ((settings['direction'] == 'b') && (ci + 1 == settings['effect']['showCount'])) { 568 liel.css('top', (ci + 1) * settings['fheight']); 569 liel.animate({'top': ci * settings['fheight']}, settings['duration'], settings['easing']); 570 } 571 else { 572 if ((ci < settings['effect']['showCount']) && (ci >= 0)) { 573 liel.animate({'top': ci * settings['fheight']}, settings['duration'], settings['easing']); 574 } 575 else { 576 liel.css('top', (ci * settings['fheight'])); 577 } 578 } 579 } 580 else { 581 if ((settings['direction'] == 'f') && (ci == 0)) { 582 liel.css('left', (-1 * settings['fwidth'])); 583 liel.animate({'left': ci * settings['fwidth']}, settings['duration'], settings['easing']); 584 } 585 else if ((settings['direction'] == 'f') && (pi + 1 == settings['effect']['showCount'])) { 586 liel.animate({'left': (settings['effect']['showCount']) * settings['fwidth']}, settings['duration'], settings['easing']); 587 } 588 else if ((settings['direction'] == 'b') && (pi == 0)) { 589 liel.animate({'left': -1 * settings['fwidth']}, settings['duration'], settings['easing']); 590 } 591 else if ((settings['direction'] == 'b') && (ci + 1 == settings['effect']['showCount'])) { 592 liel.css('left', (ci + 1) * settings['fwidth']); 593 liel.animate({'left': ci * settings['fwidth']}, settings['duration'], settings['easing']); 594 } 595 else { 596 if ((ci < settings['effect']['showCount']) && (ci >= 0)) { 597 liel.animate({'left': ci * settings['fwidth']}, settings['duration'], settings['easing']); 598 } 599 else { 600 liel.css('left', (ci * settings['fwidth'])); 601 } 602 } 603 } 604 605 setTimeout(callback, settings['duration'] + 100); 606 }); 607 } 608 }, 609 //------------------------------------------------------------------------------- 610 test: { 611 init: function($elem, settings) { 612 if (settings['debug']) 613 console.log('ulslideEffects.test.init();'); //*** 614 }, 615 resize: function($elem, settings) { 616 if (settings['debug']) 617 console.log('ulslideEffects.test.resize();'); //*** 618 }, 619 slide: function($elem, settings, $prevElem, $currentElem, callback) { 620 if (settings['debug'])
621 console.log('ulslideEffects.test.slide();'); //*** 622 } 623 } 624 //------------------------------------------------------------------------------- 625 }; 626 // --- end Effects --- 627 628 629 // --- jQuery plugin --- 630 $.fn.ulslide = function(settings) { 631 var thisObj = this; 632 if (thisObj.length == 0) return false; 633 var thisEl = thisObj[0]; 634 if (! $(thisEl).attr('id')) { 635 if (ulslide_last_id == undefined) 636 ulslide_last_id = 0; 637 ulslide_last_id ++; 638 $(thisEl).attr('id', 'ulslide-' + ulslide_last_id); 639 } 640 var id = $(thisEl).attr('id'); 641 642 // Settings 643 settings = $.extend({ 644 effect: { 645 type: 'slide', // slide, fade, crossfade, flip3D, cube3D or carousel (use showCount for carousel) 646 axis: 'x', // x, y, r (r - random) 647 distance: 20 // Distance between frames 648 }, 649 perspective: 1000, // Perspective for 3D effects 650 duration: 600, // Changing duration 651 direction: 'f', // f, b 652 autoslide: false, // Autoscrolling interval (ms) 653 current: 0, 654 655 canResize: false, 656 width: thisObj.width(), 657 height: 'auto', // pixels or 'auto' 658 659 statusbar: true, 660 loader: '', 661 loadClass: 'usl-loading', 662 663 loadTimeout: 5000, // images loading timeout 664 lazyload: false, // testing 665 ajax: false, 666 667 mousewheel: false, // Scroll on "mousewheel" 668 669 // Selectors: 670 pager: false,
671 nextButton: false, 672 prevButton: false, 673 printCurrentTo: false, 674 675 //framesOnPage: 2, 676 677 onAnimateStart: function(settings, thisEl){}, 678 onAnimate: function(settings, thisEl){}, 679 onAjaxStart: function(settings, thisEl){}, 680 onAjaxStop: function(settings, thisEl){}, 681 682 beforeResize: function(settings, thisEl){}, 683 onResize: function(settings, thisEl){}, 684 685 debug: false 686 687 },settings); 688 689 // Deprecated Options 690 if (typeof settings['affect'] != 'undefined') settings['effect']['type'] = settings['affect']; 691 if (typeof settings['axis'] != 'undefined') settings['effect']['axis'] = settings['axis']; 692 if (typeof settings['padding'] != 'undefined') settings['effect']['distance'] = settings['padding']; 693 if (typeof settings['navigator'] != 'undefined') settings['pager'] = settings['navigator']; 694 if (typeof settings['print_current'] != 'undefined') settings['printCurrentTo'] = settings['print_current']; 695 if (typeof settings['bnext'] != 'undefined') settings['nextButton'] = settings['bnext']; 696 if (typeof settings['bprev'] != 'undefined') settings['prevButton'] = settings['bprev']; 697 // end Deprecated Options 698 699 if (settings['canResize'] && settings['height'] == 'auto') 700 settings['height'] = thisObj.height(); 701 702 if (typeof settings['effect']['distance'] == 'undefined') 703 settings['effect']['distance'] = 20; 704 705 settings['fwidth'] = settings['width'] + settings['effect']['distance']; 706 settings['fheight'] = settings['height'] + settings['effect']['distance']; 707 settings['prev'] = settings['current']; 708 settings['count'] = $('> *', thisObj).length; 709 710 if (settings['lazyload']) { 711 $('img', thisObj).each(function(i){ 712 var img = $(this); 713 img.attr('rel', img.attr('src')); 714 if (i > 0) { 715 img.removeAttr('src'); 716 } 717 }); 718 } 719 720 thisObj.carouselGetFramePos = function (i, current) { 721 if (i >= settings['effect']['showCount'] - current) { 722 var l = settings['count'] - settings['effect']['showCount']; 723 var ci = (i + current - settings['effect']['showCount']) - l; 724 return ci; 725 } 726 else return i + current; 727 }; 728 729 // Initialize elements 730 $('> *', thisObj).each(function(i){ 731 var liel = $(this); 732 liel.addClass('slide-node slide-node-'+i); 733 734 liel.css({ 735 'position': 'absolute', 736 'margin': '0', 737 'width': settings['width'], 738 'overflow': 'hidden' 739 }); 740 741 if (i == settings['current']) { 742 liel.css({ 743 'top': '0', 744 'left': '0' 745 }); 746 } 747 else { 748 liel.css({ 749 'top': '0', 750 'left': -(settings['width'] + settings['effect']['distance']) 751 }); 752 } 753 }); 754 755 // Initialize container 756 thisObj.css({ 757 'list-style': 'none', 758 'position': 'relative', 759 'padding': 0, 760 'overflow': 'hidden' 761 }); 762 763 if (! settings['canResize']) { 764 thisObj.css('width', settings['width']); 765 766 if (settings['height'] == 'auto'){ 767 thisObj.css('height', $('> *:eq('+settings['current']+')', thisObj).height()); 768 } 769 else thisObj.css('height', settings['height']); 770 771 settings['prevHeight'] = settings['height']; 772 } 773 774 // Initialize effect 775 var effect = ulslideEffects[settings['effect']['type']]; 776 if (effect != undefined) { 777 effect.init(thisObj, settings); 778 effect.resize(thisObj, settings); 779 } 780 // end Initialize 781 782 function resize(){ 783 var size = settings['beforeResize'](settings, thisEl); // event 784 785 if (size && size.width && size.height) { 786 settings['width'] = size.width; 787 settings['height'] = size.height; 788 } 789 else { 790 settings['width'] = thisObj.width(); 791 settings['height'] = thisObj.height(); 792 } 793 794 //console.log('resize ' + settings['width'] + ' x ' + settings['height']); //***** 795 settings['fwidth'] = settings['width'] + settings['effect']['distance']; 796 settings['fheight'] = settings['height'] + settings['effect']['distance']; 797 798 799 //thisObj.css('width', settings['width']); 800 801 if (settings['height'] == 'auto'){ 802 thisObj.css('height', $('>
802 *:eq('+settings['current']+')', thisObj).height()); 803 804 console.log('resize auto height: ' + $('> *:eq('+settings['current']+')', thisObj).height()); //***** 805 } 806 //else thisObj.css('height', settings['height']); 807 808 settings['prevHeight'] = settings['height']; 809 810 /* elements */ 811 $('> *', thisObj).each(function(i){ 812 var liel = $(this); 813 liel.addClass('slide-node slide-node-'+i); 814 liel.css('position', 'absolute'); 815 liel.css('margin', '0'); 816 liel.css('distance', '0'); 817 liel.css('width', settings['width']); 818 liel.css('overflow', 'hidden'); 819 820 if (settings['effect']['type'] != 'carousel') { 821 if (i == settings['current']){ 822 liel.css('top', '0'); 823 liel.css('left', '0'); 824 } 825 else{ 826 liel.css('top', '0'); 827 liel.css('left', -(settings['width'] + settings['effect']['distance'])); 828 } 829 830 if (settings['height'] == 'auto'){ 831 liel.css('height', $('> *:eq('+settings['current']+')', thisObj).height()); 832 } 833 else liel.css('height', settings['height']); 834 } 835 }); 836 837 // Resize effect 838 if (effect != undefined) { 839 effect.resize(thisObj, settings); 840 } 841 // end Resize effect 842 843 settings['onResize'](settings, thisEl); // event 844 } 845 846 thisEl.getSlide = function getSlide(num) { 847 return $('> *:eq('+num+')', thisEl); 848 }; 849 850 thisEl.array_rand = function(arg) { 851 return arg[Math.floor(Math.random() * arg.length)]; 852 }; 853 854 function next() { 855 var c = thisEl.uslCurrent(); 856 settings['direction'] = 'f'; 857 if (c + 1 < settings['count']) { 858 thisEl.uslRefresh(c + 1); 859 } else { 860 861 thisEl.uslRefresh(0); 862 } 863 } 864 865 function prev() { 866 var c = thisEl.uslCurrent(); 867 settings['direction'] = 'b'; 868 if (c > 0) { 869 thisEl.uslRefresh(c - 1); 870 } else { 871 thisEl.uslRefresh(settings['count'] - 1); 872 } 873 } 874 875 if (settings['height'] == 'auto') 876 thisEl.currentHeight = thisEl.getSlide(settings['current']).height(); 877 else thisEl.currentHeight = settings['height']; 878 879 thisEl.uslCurrent = function(new_value){ 880 if (new_value == undefined){ 881 return settings['current']; 882 } 883 else { 884 var old = thisEl.uslCurrent(); 885 var c = new_value; 886 887 settings['current'] = new_value; 888 return new_value; 889 } 890 }; 891
892 thisEl.autoslideNext = function(){ 893 /*if (settings['direction'] == 'f') next(); 894 else prev();*/ 895 next(); 896 }; 897 898 thisEl.initAutoslide = function(){ 899 900 if (settings['TimeoutID']) clearTimeout(settings['TimeoutID']); 901 settings['TimeoutID'] = setTimeout("jQuery('#"+$(thisEl).attr('id')+"')[0].autoslideNext()", settings['autoslide']); 902 903 if (settings['debug']) 904 console.log('initAutoslide: ' + settings['TimeoutID']); 905 }; 906 907 thisEl.clearAutoslide = function(){ 908 if (settings['TimeoutID']) { 909 clearTimeout(settings['TimeoutID']); 910 } 911 }; 912 913 thisEl.uslRefresh = function(slide_index, fast, callback){ 914 if (settings['debug']) 915 console.log('uslRefresh()'); 916 917 if (! thisEl.ready) { 918 if (settings['debug']) 919 console.log('uslRefresh / ' + settings['id'] + ': ! thisEl.ready'); 920 921 setTimeout("jQuery('#"+$(thisEl).attr('id')+"')[0].uslRefresh()", 400); 922 return; 923 } 924 if (settings['LoadTimeoutID']) clearTimeout(settings['LoadTimeoutID']); 925 thisEl.ready = false; 926 927 if (typeof(slide_index) != 'undefined') { 928 thisEl.uslCurrent(slide_index); 929 } 930 931 thisEl.clearAutoslide(); 932 var prev = thisEl.getSlide(settings['prev']); 933 var current = thisEl.getSlide(settings['current']); 934 current.css('display', 'block'); 935 936 function doRefresh() { 937 if (settings['debug']) 938 console.log('doRefresh()'); 939 940 settings['onAnimateStart'](settings, thisEl); // notification 941 //console.log(settings['id'] + ': doRefresh'); 942 943 if (settings['height'] == 'auto') { 944 thisEl.currentHeight = thisEl.getSlide(settings['current']).height(); 945 settings['prevHeight'] = thisEl.getSlide(settings['prev']).height(); 946 } 947 948 function finish_animate() { 949 if (settings['debug']) 950 console.log('finish_animate(): start'); 951 952 if (settings['printCurrentTo']) {
953 $(settings['printCurrentTo']).html(settings['current'] + 1); 954 } 955 956 if ((settings['prev'] != settings['current']) && (settings['effect']['type'] != 'carousel') ) { 957 prev.css('display', 'none'); 958 } 959 960 if (settings['height'] == 'auto') { 961 thisObj.animate({ 962 'height': thisEl.currentHeight 963 }, 250/*, function() { alert(settings['id'] + ': finish_animate()' + thisEl.currentHeight); }*/); 964 } 965 966 //settings['prev'] = settings['current']; 967 if (settings['debug']) 968 console.log('finish_animate(): autoslide = ' + settings['autoslide']); 969 970 if (settings['autoslide']) thisEl.initAutoslide(); 971 settings['onAnimate'](settings, thisEl); // notification 972 settings['prev'] = settings['current']; 973 thisEl.uslRefreshClasses(); 974 thisEl.ready = true; 975 976 if (typeof callback != 'undefined') callback(); 977 } 978 979 if (settings['prev'] == settings['current']) { 980 finish_animate(); 981 return; 982 } 983 984 // Call effect 985 if (effect != undefined) { 986 effect.slide(thisObj, settings, prev, current, finish_animate); 987 } 988 } 989 990 if (settings['ajax']) { 991 settings['onAjaxStart'](settings, thisEl); // notification 992 var statusbar_loaded = thisEl.getSlide(settings['current'])[0].usl_ajax_loaded; 993 994 thisEl.uslAjaxLoadSlide(settings['current'], function() { 995 settings['onAjaxStop'](settings, thisEl); // notification 996 doRefresh(); 997 }) 998 } 999 else { 1000 if (settings['lazyload']) { 1001 var $imgToLoad = $('img', current[0]); 1002 1003 $imgToLoad.each(function(i){ 1004 var img = $(this); 1005 img.attr('src', img.attr('rel')); 1006 }); 1007 1008 settings['z_img_count'] = $imgToLoad.length; 1009 settings['z_img_loaded'] = 0; 1010 $imgToLoad.each(function(){ 1011 if (this.complete) { 1012 settings['z_img_loaded'] ++; 1013 } 1014 else { 1015 $(this).load(function(){ 1016 settings['z_img_loaded'] ++; 1017 if (settings['z_img_loaded'] == settings['z_img_count']){ 1018 doRefresh(); 1019 } 1020 }); 1021 } 1022 }); 1023 1024 if (settings['z_img_loaded'] == settings['z_img_count']){ 1025 doRefresh(); 1026 } 1027 return; 1028 } 1029 1030 doRefresh(); 1031 } 1032 }; 1033 1034 thisEl.uslAjaxLoadSlide = function(slide_num, callback) { 1035 var current = thisEl.getSlide(slide_num); 1036 1037 if (current[0].usl_ajax_loaded) { 1038 callback(); 1039 } 1040 else { 1041 var url = $(settings['pager']).eq(slide_num).attr('href'); 1042 current[0].usl_ajax_loaded = true; 1043 current.load(url + '?ajax=1', false, callback); 1044 } 1045 }; 1046 1047 thisEl.uslRefreshClasses = function(){ 1048 if (settings['count'] > 1){ 1049 if (settings['nextButton']) $(settings['nextButton']).addClass('active'); 1050 if (settings['prevButton']) $(settings['prevButton']).addClass('active'); 1051 } 1052 if (settings['pager']){ 1053 $(settings['pager']).removeClass('usl-current'); 1054 $(settings['pager'] + '.usl-pager-'+thisEl.uslCurrent()).addClass('usl-current'); 1055 $(settings['pager']).parent().removeClass('usl-current-parent'); 1056 $(settings['pager'] + '.usl-pager-'+thisEl.uslCurrent()).parent().addClass('usl-current-parent'); 1057 } 1058 }; 1059 1060 if (settings['nextButton']){ 1061 $(settings['nextButton']).click(function(){ 1062 next(); 1063 return false;
1064 }); 1065 } 1066 1067 if (settings['prevButton']){ 1068 $(settings['prevButton']).click(function(){ 1069 prev(); 1070 return false; 1071 }); 1072 } 1073 1074 function setNavigator(s_navigator) { 1075 var pager = $(s_navigator); 1076 pager.each(function(index){ 1077 this.usl_navigator_index = index; 1078 $(this).addClass('usl-pager-' + index); 1079 }); 1080 1081 pager.click(function(){ 1082 var c = this.usl_navigator_index; 1083 if ((c < settings['count']) && (c != thisEl.uslCurrent())) { 1084 //thisEl.uslCurrent(c); 1085 if (c > thisEl.uslCurrent()) settings['direction'] = 'f'; 1086 else settings['direction'] = 'b'; 1087 thisEl.uslRefresh(c); 1088 } 1089 return false; 1090 }); 1091 } 1092 1093 if (settings['pager']){ 1094 setNavigator(settings['pager']); 1095 } 1096 if (settings['navigator2']){ 1097 setNavigator(settings['navigator2']); 1098 } 1099 1100 function loadingStatus(loading) { 1101 if (loading) { 1102 thisObj.addClass('usl-loading'); 1103 thisObj.parent().addClass('usl-parent-loading'); 1104 1105 if (settings['loader']) { 1106 jQuery(settings['loader']).addClass(settings['loadClass']); 1107 } 1108 } 1109 else { 1110 thisObj.removeClass('usl-loading'); 1111 thisObj.parent().removeClass('usl-parent-loading'); 1112 1113 if (settings['loader']) { 1114 jQuery(settings['loader']).removeClass(settings['loadClass']); 1115 } 1116 } 1117 } 1118 1119 thisEl.uslStatusbar = function() { 1120 1121 function isImageLoaded(img) { 1122 if (!img.complete) { 1123 return false; 1124 } 1125 if (typeof img.naturalWidth !== 'undefined' && img.naturalWidth === 0) { 1126 return false; 1127 } 1128 return true; 1129 } 1130 1131 if (settings['lazyload']) { 1132 var $imgToLoad = $('>
1132li:eq('+settings['current']+') img', thisEl); 1133 } 1134 else { 1135 var $imgToLoad = $('img', thisEl); 1136 } 1137 1138 settings['img_count'] = $imgToLoad.length; 1139 if (settings['img_count']) { 1140 loadingStatus(true); 1141 } 1142 1143 settings['img_loaded'] = 0; 1144 $imgToLoad.each(function(){ 1145 1146 if (isImageLoaded(this)) { 1147 settings['img_loaded'] ++; 1148 if (settings['debug']) 1149 console.log($(this).attr('src') + ' loaded'); 1150 } 1151 else { 1152 $(this).load(function(){ 1153 settings['img_loaded'] ++; 1154 1155 if (settings['debug']) 1156 console.log('Img LOAD / ' + settings['img_loaded'] + ' of ' + settings['img_count']); 1157 1158 if (settings['img_loaded'] == settings['img_count']){ 1159 loadingStatus(false); 1160 thisEl.ready = true; 1161 thisEl.uslRefresh(); 1162 } 1163 }); 1164 if (settings['debug']) 1165 console.log($(this).attr('src') + ' NOT loaded'); 1166 } 1167 }); 1168 1169 if (settings['debug']) 1170 console.log('uslStatusbar() / ' + settings['img_loaded'] + ' of ' + settings['img_count']); 1171 1172 if (settings['img_loaded'] == settings['img_count']){ 1173 loadingStatus(false); 1174 thisEl.ready = true; 1175 thisEl.uslRefresh(); 1176 } 1177 1178 settings['LoadTimeoutID'] = setTimeout(function(){ 1179 loadingStatus(false); 1180 thisEl.ready = true; 1181 thisEl.uslRefresh(); 1182 }, settings['loadTimeout']); 1183 }; 1184 1185 // statusbar 1186 if (settings['statusbar'] && !settings['ajax']){ 1187 thisEl.uslStatusbar(); 1188 } 1189 1190 /* 1191 * If the mousewheel plugin has been included on the page then 1192 * the slider will also respond to the mouse wheel. 1193 */ 1194 if (settings['mousewheel']) { 1195 thisObj.bind( 1196 'mousewheel', 1197 function (event, delta) { 1198 if (thisEl.ready) { 1199 if (delta < 0) { 1200 next(); 1201 } 1202 else { 1203 prev(); 1204 } 1205 } 1206 return false; 1207 }); 1208 } 1209 1210 if (settings['canResize']){ 1211 thisObj.on('resize', resize); 1212 jQuery(window).on('resize', resize); 1213 resize(); 1214 } 1215 1216 if (! settings['statusbar'] || settings['ajax']) { 1217 thisEl.ready = true; 1218 thisEl.uslRefresh(); 1219 } 1220 }; 1221})(jQuery); 1222// --- end jQuery plugin ---
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.