1/*! 2 * Nu_ImgSwitch 3 * Copyright (C) 2013 Adam Tavares 4 * http://adamtavares.com 5 * 6 * Permission is hereby granted, free of charge, to any person obtaining 7 * a copy of this software and associated documentation files (the 8 * "Software"), to deal in the Software without restriction, including 9 * without limitation the rights to use, copy, modify, merge, publish, 10 * distribute, sublicense, and/or sell copies of the Software, and to 11 * permit persons to whom the Software is furnished to do so, subject to 12 * the following conditions: 13 * 14 * The above copyright notice and this permission notice shall be 15 * included in all copies or substantial portions of the Software. 16 * 17 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 19 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 21 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 22 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 23 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 24 */ 25;(function($) { 26 function nu_imgswitch( elem, options ) { 27 var self = this; 28 self.elem = elem; 29 self.init( elem, options ); 30 } 31 32 nu_imgswitch.prototype.init = function( elem, options ) { 33 var self = this; 34 35 self.options = $.extend({ 36 //----------------------------------- 37 // Transition effect between images 38 //----------------------------------- 39 transition: 'flip', 40 41 //----------------------------------- 42 // How long each image is displayed 43 //----------------------------------- 44 speed: 5, 45 46 //-------------------------------------- 47 // The length of the transition effect 48 //-------------------------------------- 49 transition_speed: 1, 50 51 //-------------------------------------- 52 // The width and height of your images 53 //-------------------------------------- 54 height: null, 55 width: null, 56 57 //--------------------------------------- 58 // The slide transitions easing setting 59 //--------------------------------------- 60 easing:'swing', 61 62 //------------------------- 63 // Manual control buttons 64 //------------------------- 65 left_button:null, 66 right_button:null, 67 68 //--------------------------- 69 // Hover states on buttons? 70 //--------------------------- 71 left_button_hover: null, 72 right_button_hover: null, 73 74 //----------------------- 75 // Only manual control? 76 //----------------------- 77 click_only: null, 78 79 //--------------- 80 // Dot markers? 81 //--------------- 82 dot_empty: null, 83 dot_full: null, 84 dot_margin: 0, 85 86 //--------------------- 87 // Stop on last image 88 //--------------------- 89 stop_on_last: false, 90 91 }, options); 92 93 //----------------------------------- 94 // Shared instance method variables 95 //----------------------------------- 96 self.obj = { 97 current:0, 98 height:0, 99 width:0, 100 coeff:1, 101 button_height: null, 102 button_width: null, 103 running: null, 104 control_clicked: false, 105 direction: 'right', 106 reverse: false, 107 transition: null, 108 total_imgs: null, 109 dot_height: null, 110 dot_width: null, 111 dots_height: null, 112 dots_width: null, 113 dot_index: 0, 114 full_stop: false, 115 }; 116 117 //------------------ 118 // Build the thing 119 //------------------ 120 self.create(); 121 } 122 123 nu_imgswitch.prototype.dotUpdate = function() { 124 var self = this; 125 126 //------------------------- 127 // Get the direction value 128 //------------------------- 129 var direction = null; 130 switch ( self.obj['direction'] ) { 131 case 'right': 132 direction = 1; 133 break; 134 case 'left': 135 direction = -1; 136 break; 137 } 138 //------------------- 139 // 'Re-cycle' index 140 //------------------- 141 var old_index = self.obj['dot_index']; 142 self.obj['dot_index'] += direction; 143 if ( direction == 1 && self.obj['dot_index'] > self.obj['total_imgs']-1 ) { 144 self.obj['dot_index'] = 0; 145 } 146 if ( direction == -1 && self.obj['dot_index'] < 0 ) { 147 self.obj['dot_index'] = self.obj['total_imgs']-1; 148 } 149 self.obj['dot_old_index'] = old_index; 150 151 //--------------- 152 // Draw the dot 153 //--------------- 154 self.dotDraw(); 155 } 156 157 nu_imgswitch.prototype.dotDraw = function() { 158 var self = this; 159
160 //---------------------- 161 // Move the filled dot 162 //---------------------- 163 var dot = $( '.dots img', self.elem ).eq( self.obj['dot_old_index'] ); 164 $( '.dots img', self.elem ).eq( self.obj['dot_old_index'] ).detach(); 165 var index = self.obj['dot_index']-1; 166 switch ( self.obj['direction'] ) { 167 case 'right': 168 if ( index < 0 ) { 169 $( '.dots img', self.elem ).eq(0).before( dot ); 170 } 171 else { 172 $( '.dots img', self.elem ).eq( index ).after( dot ); 173 } 174 break; 175 case 'left': 176 if ( self.obj['dot_index'] == self.obj['total_imgs']-1 ) { 177 $( '.dots img', self.elem ).eq( index ).after( dot ); 178 } 179 else { 180 $( '.dots img', self.elem ).eq( self.obj['dot_index'] ).before( dot ); 181 } 182 break; 183 } 184 } 185 186 //----------------------------------------------------- 187 // Reorder the images to simulate a direction change. 188 //----------------------------------------------------- 189 nu_imgswitch.prototype.changeDirection = function() { 190 var self = this; 191 192 //------------------------------------------------------- 193 // Temporary storage of dom self.elements for the reordering 194 //------------------------------------------------------- 195 var imgs = {}; 196 var count = 0; 197 var totalBack = $( 'img.slide', self.elem ).length-1; 198 //-------------------------------------------------------------------- 199 // Grab all the sibling dom self.elements, but keep track of their order! 200 //-------------------------------------------------------------------- 201 //------------------------------------------------------------ 202 // Grab every sibling self.element BEFORE current 203 //------------------------------------------------------------ 204 var i = self.obj['current']-1; 205 while ( i >= 0 ) { 206 imgs[count] = $( 'img.slide', self.elem ).eq(i); 207 $( 'img.slide', self.elem ).eq(i).detach(); 208 i--; 209 count++; 210 } 211 //------------------------------------------------------------- 212 // Grab every sibling self.element AFTER current starting from top 213 //------------------------------------------------------------- 214 var l = $('img.slide', self.elem ).length-1; 215 216 // *note: because of detach() in loop above the current index is now 0 217 while ( l > 0 ) { 218 imgs[count] = $( 'img.slide', self.elem ).eq(l); 219 $( 'img.slide', self.elem ).eq(l).detach(); 220 l--; 221 count++; 222 } 223 //----------------------------------------------- 224 // Put everything in place and fix the z-index. 225 //----------------------------------------------- 226 while ( totalBack >= 0 ) { 227 $( 'img.slide', self.elem ).eq(0).after( imgs[totalBack] ); 228 $( 'img.slide', self.elem ).eq(1).css( 'z-index', 1 ); 229 totalBack--; 230 } 231 //---------------------------- 232 // Reset the current counter 233 //---------------------------- 234 self.obj['current'] = 0; 235 $( 'img.slide', self.elem ).eq(1).css( 'z-index', 2 ) 236 } 237 238 nu_imgswitch.prototype.buildDots = function() { 239 var self = this; 240 241 //------------------------------------ 242 // Get the dots margin as an integer 243 //------------------------------------ 244 self.obj['dot_margin'] = self.options['dot_margin'].replace( 'px', '' ); 245 246 //----------------- 247 // Build the dots 248 //----------------- 249 var regexp = new RegExp( '<img [^>]*src="(.*?[^\])"[^>]*/>' ); 250 var arr = self.options['dot_full'].match( regexp ); 251 var dot_img = new Image(); 252 253 //-------------------- 254 // watchout for this 255 //-------------------- 256 dot_img.onload = function() { 257 self.obj['dot_height'] = this.height; 258 self.obj['dot_width'] = this.width; 259 260 self.obj['dots_height'] = self.obj['dot_height'] + self.obj['dot_margin'] * 2; 261 self.obj['dots_width'] = ( self.obj['dot_width'] + self.obj['dot_margin'] * 2 ) * self.obj['total_imgs']; 262 263 dots = $(document.createElement('div')); 264 dots.addClass('dots'); 265 dots.css({'position':'absolute','z-index':4}); 266 267 dots.append( self.options['dot_full'] ); 268 var i = 1; 269 while ( i < self.obj['total_imgs'] ) { 270 dots.append( self.options['dot_empty'] ); 271 i++; 272 } 273 $(self.elem).append( dots ); 274 275 276 //---------------------------- 277 // Create dot click handlers 278 //---------------------------- 279 dots.children().each( function() { 280 $(this).click( function(e){ 281 self.dotClick( this ); 282 }); 283 }); 284 285 //---------------------- 286 // Position those dots 287 //---------------------- 288 self.positionDots(); 289 } 290 dot_img.src = arr[1]; 291 } 292 293 nu_imgswitch.prototype.dotClick = function( dot ) { 294 var self = this; 295
296 self.goTo( $(dot).index()+1 ); 297 } 298 299 //----------------------- 300 // Position those dots! 301 //----------------------- 302 nu_imgswitch.prototype.positionDots = function() { 303 var self = this; 304 305 $( '.dots', self.elem ).css({ 'top': self.obj['height']-self.obj['dots_height'] }); 306 $( '.dots', self.elem ).css({ 'left': ( self.obj['width']-self.obj['dots_width'] ) / 2 }); 307 $( '.dots img', self.elem ).css({ 'margin': self.options['dot_margin'] }); 308 } 309 310 //----------------------------------------- 311 // Build clickable manual control buttons 312 //----------------------------------------- 313 nu_imgswitch.prototype.buildControls = function() { 314 var self = this; 315 316 //-------------------- 317 // Build the buttons 318 //-------------------- 319 var left_button = $(document.createElement('a')); 320 left_button.addClass('left_button'); 321 left_button.prepend( self.options['left_button'] ); 322 $( self.elem ).append( left_button ); 323 324 var right_button = $(document.createElement('a')); 325 right_button.addClass('right_button'); 326 right_button.prepend( self.options['right_button'] ); 327 $( self.elem ).append( right_button ); 328 329 //---------------------------------------------------- 330 // Get an accurate height and width for the buttons 331 // I'm assuming left and right buttons have the same 332 // dimensions 333 //---------------------------------------------------- 334 var regexp = new RegExp( '<img [^>]*src="(.*?[^\])"[^>]*/>' ); 335 var arr = self.options['left_button'].match( regexp ); 336 var left_img = new Image(); 337 338 left_img.onload = function() { 339 self.obj['button_height'] = this.height; 340 self.obj['button_width'] = this.width; 341 self.positionControls(); 342 } 343 left_img.src = arr[1]; 344 345 //----------------- 346 // Click handling 347 //----------------- 348 left_button.click( function(){ 349 self.leftClick(); 350 }); 351 352 right_button.click( function(){ 353 self.rightClick(); 354 }); 355 356 //--------------- 357 // Hover states 358 //--------------- 359 if ( self.options['left_button_hover'] != null && self.options['right_button_hover'] != null ) { 360 left_button.mouseenter( function() { 361 arr = self.options['left_button_hover'].match( regexp ); 362 $( 'img', left_button ).attr( 'src', arr[1] ); 363 }); 364 365 right_button.mouseenter( function() { 366 arr = self.options['right_button_hover'].match( regexp ); 367 $( 'img', right_button ).attr( 'src', arr[1] ); 368 }); 369 left_button.mouseleave( function() { 370 arr = self.options['left_button'].match( regexp ); 371 $( 'img', left_button ).attr( 'src', arr[1] ); 372 }); 373 374 right_button.mouseleave( function() { 375 arr = self.options['right_button'].match( regexp ); 376 $( 'img', right_button ).attr( 'src', arr[1] ); 377 }); 378 } 379 } 380 381 //------------------------------------------------------------ 382 // Click handling 383 //------------------------------------------------------------ 384 nu_imgswitch.prototype.leftClick = function() { 385 var self = this; 386 387 self.obj['control_clicked'] = true; 388 if ( self.obj['direction'] == 'right' ) { 389 self.changeDirection(); 390 } 391 self.obj['direction'] = 'left'; 392 if ( self.obj['running'] != null ) { 393 self.stop(); 394 } 395 //------------------ 396 // Update the dots 397 //------------------ 398 self.dotUpdate(); 399 400 //------------------- 401 // Update the image 402 //------------------- 403 self.currentPlus(); 404 self.go( self.options['transition_speed'] ); 405 } 406 407 nu_imgswitch.prototype.rightClick = function() { 408 var self = this; 409 410 self.obj['control_clicked'] = true; 411 if ( self.obj['direction'] == 'left' ) { 412 self.changeDirection(); 413 } 414 self.obj['direction'] = 'right'; 415 if ( self.obj['running'] != null ) { 416 self.stop(); 417 } 418 //------------------ 419 // Update the dots 420 //------------------ 421 self.dotUpdate(); 422 423 //------------------- 424 // Update the image 425 //------------------- 426 self.currentPlus(); 427 self.go( self.options['transition_speed'] ); 428 } 429 430 //----------------------------------------------------- 431 // Position those buttons near the edges of the image 432 //----------------------------------------------------- 433 nu_imgswitch.prototype.positionControls = function() { 434 var self = this; 435
436 var top = ( self.obj['height'] - self.obj['button_height']) / 2; 437 $( '.left_button', self.elem ).css( { 'position':'absolute','z-index':4 } ); 438 $( '.right_button', self.elem ).css( { 'position':'absolute','z-index':4 } ); 439 $( '.left_button', self.elem ).css( { 'top':top,'left':0 } ); 440 $( '.right_button', self.elem ).css( { 'top':top,'left':self.obj['width']-self.obj['button_width'] } ); 441 } 442 443 nu_imgswitch.prototype.currentPlus = function() { 444 var self = this; 445 446 self.obj['current']++; 447 } 448 449 //------------------------- 450 // Go to a specific index 451 //------------------------- 452 nu_imgswitch.prototype.goTo = function( num ) { 453 var self = this; 454 455 //----------------------- 456 // Get the actual index 457 //----------------------- 458 num -= 1; 459 460 //--------------------------------------------------------------- 461 // Don't do anything if the image you want is the current image 462 //--------------------------------------------------------------- 463 if ( self.obj['dot_index'] == num ) { 464 return; 465 } 466 467 //---------------------------------------------- 468 // How many spaces am I going to have to move? 469 //---------------------------------------------- 470 spaces = num - self.obj['dot_index']; 471 472 //------------------------------------ 473 // Store the old and new dot indexes 474 //------------------------------------ 475 self.obj['dot_old_index'] = self.obj['dot_index']; 476 self.obj['dot_index'] = num; 477 478 //------------------ 479 // Redraw that dot 480 //------------------ 481 self.dotDraw(); 482 483 //-------------------- 484 // Direction change? 485 //-------------------- 486 if ( spaces < 0 ) { 487 if ( self.obj['direction'] == 'right') { 488 self.changeDirection(); 489 self.obj['direction'] = 'left'; 490 } 491 spaces = spaces * -1; 492 } 493 else { 494 if ( self.obj['direction'] == 'left') { 495 self.changeDirection(); 496 self.obj['direction'] = 'right'; 497 } 498 } 499 500 var transition_speed = self.options['transition_speed'] / Math.abs(spaces); 501 self.currentPlus(); 502 self.go( transition_speed, spaces ); 503 } 504 505 nu_imgswitch.prototype.go = function( transition_speed, repeat ) { 506 var self = this; 507 508 //------------------------------------------------------------ 509 // Let the world know things are a changing. 510 //------------------------------------------------------------ 511 var clss = $( self.elem ).attr('class'); 512 var id = $( self.elem ).attr('id'); 513 var index = self.obj['dot_index']; 514 $(document).trigger( 'NU_IMGSWITCH-SWITCH', [id,clss,index] ); 515 516 //----------------------------------------- 517 // Reset the height and other css values 518 //----------------------------------------- 519 $( self.elem ).css( { 'width': self.obj['width'], 'height': self.obj['height'] } ); 520 $( 'img.slide', self.elem ).css( { 'width': self.obj['width'], 'height': self.obj['height'], 'left': 0, 'top': 0 } ); 521 522 //---------------------------------------- 523 // Increment and reset index for looping 524 //---------------------------------------- 525 if ( self.obj['current'] == $( 'img.slide', self.elem ).length ) { 526 self.obj['current'] = 0; 527 } 528 var prev = self.obj['current'] - 1; 529 if ( prev < 0 ) { 530 prev = $( 'img.slide', self.elem ).length - 1; 531 } 532 var next = self.obj['current'] + 1; 533 if ( next == $( 'img.slide', self.elem ).length ) { 534 next = 0; 535 } 536 537 //-------------- 538 // Transitions 539 //-------------- 540 var transition = self.options['transition']; 541 542 //------------------------------------------------------- 543 // smartSlide knows which button you clicked and slides 544 // the image in that direction. 545 //------------------------------------------------------- 546 if ( self.options['transition'] == 'smartSlide' || self.options['transition'] == 'smartSlideOut' ) { 547 switch ( self.obj['direction'] ) { 548 case 'right': 549 transition = 'rightSlide'; 550 break; 551 case 'left': 552 transition = 'leftSlide'; 553 break; 554 } 555 } 556 //------------------------------------------------------------- 557 // smartSlideIn is like smartSlide except... you know... "in" 558 //------------------------------------------------------------- 559 if ( self.options['transition'] == 'smartSlideIn' ) { 560 switch ( self.obj['direction'] ) { 561 case 'right': 562 transition = 'rightSlideIn'; 563 break; 564 case 'left': 565 transition = 'leftSlideIn'; 566 break; 567 } 568 } 569 //--------------------------------------------------------------------
570 // smartPushIn is like smartSlide except... you know... "pushing in" 571 //-------------------------------------------------------------------- 572 if ( self.options['transition'] == 'smartPushIn' ) { 573 switch ( self.obj['direction'] ) { 574 case 'right': 575 transition = 'rightPushIn'; 576 break; 577 case 'left': 578 transition = 'leftPushIn'; 579 break; 580 } 581 } 582 //-------------------------------------------------------------------------------- 583 // smartPushInVertical is like smartSlidePushIn except... you know... "vertical" 584 //-------------------------------------------------------------------------------- 585 if ( self.options['transition'] == 'smartPushInVertical' ) { 586 switch ( self.obj['direction'] ) { 587 case 'right': 588 transition = 'topPushIn'; 589 break; 590 case 'left': 591 transition = 'bottomPushIn'; 592 break; 593 } 594 } 595 switch ( transition ) { 596 case 'flip': 597 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 598 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 599 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 600 $( 'img.slide', self.elem ).css( 'display', 'block' ); 601 self.repeatOrStop( transition_speed, repeat ); 602 break; 603 case 'dissolve': 604 $( 'img.slide', self.elem ).eq( prev ).fadeOut( transition_speed * 1000, function() { 605 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 606 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 607 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 608 $( 'img.slide', self.elem ).css( 'display', 'block' ); 609 self.repeatOrStop( transition_speed, repeat ); 610 }); 611 break; 612 //------------------- 613 // LEFT Transitions 614 //------------------- 615 case 'leftSlide': 616 case 'leftSlideOut': 617 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 618 $( 'img.slide', self.elem ).eq( prev ).animate( 619 {'left': '-='+width+'px' }, 620 transition_speed * 1000, 621 self.options['easing'], 622 function(){ 623 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 624 $( 'img.slide', self.elem ).eq( prev ).css( { 'left': '+='+width+'px' } ); 625 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 626 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 627 self.repeatOrStop( transition_speed, repeat ); 628 } 629 ); 630 break; 631 case 'leftSlideIn': 632 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 633 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'z-index':3, 'left': '-'+width+'px' }); 634 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 2 }); 635 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 636 {'left': '+='+width+'px' }, 637 transition_speed * 1000, 638 self.options['easing'], 639 function(){ 640 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 1 }); 641 $( 'img.slide', self.elem ).eq( next ).css({ 'z-index': 2 }); 642 self.repeatOrStop( transition_speed, repeat ); 643 } 644 ); 645 break; 646 case 'leftPushIn': 647 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 648 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( { 'left': '-='+width+'px'} ); 649 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 650 {'left': 0}, 651 transition_speed*1000, 652 self.options['easing'] 653 ); 654 $( 'img.slide', self.elem ).eq( prev ).animate( 655 {'left': '+='+width+'px' }, 656 transition_speed * 1000, 657 self.options['easing'], 658 function(){ 659 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 660 $( 'img.slide', self.elem ).eq( prev ).css( { 'left': '-='+width+'px' } ); 661 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 662 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 663 self.repeatOrStop( transition_speed, repeat ); 664 } 665 ); 666 break; 667 //-------------------- 668 // RIGHT Transitions 669 //-------------------- 670 case 'rightSlide': 671 case 'rightSlideOut': 672 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 673 $( 'img.slide', self.elem ).eq( prev ).animate( 674 {'left': '+='+width+'px' }, 675 transition_speed * 1000, 676 self.options['easing'], 677 function(){ 678 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 679 $( 'img.slide', self.elem ).eq( prev ).css( { 'left': '-='+width+'px' } ); 680 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 681 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 682 self.repeatOrStop( transition_speed, repeat ); 683 } 684 ); 685 break; 686 case 'rightSlideIn': 687 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 688 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( {'z-index':3,'left':'+'+width+'px'} ); 689 $( 'img.slide', self.elem ).eq( prev ).css( {'z-index':2} ); 690 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 691 {'left': '-='+width+'px' }, 692 transition_speed * 1000, 693 self.options['easing'], 694 function(){ 695 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 696 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 697 self.repeatOrStop( transition_speed, repeat ); 698 } 699 ); 700 break; 701 case 'rightPushIn': 702 var width = $( 'img.slide', self.elem ).eq( prev ).width(); 703 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( { 'left': '+='+width+'px'} ); 704 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 705 {'left': 0}, 706 transition_speed*1000, 707 self.options['easing'] 708 ); 709 $( 'img.slide', self.elem ).eq( prev ).animate( 710 {'left': '-='+width+'px' }, 711 transition_speed * 1000, 712 self.options['easing'], 713 function(){ 714 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 715 $( 'img.slide', self.elem ).eq( prev ).css( { 'left': '+='+width+'px' } ); 716 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 717 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 718 self.repeatOrStop( transition_speed, repeat ); 719 } 720 ); 721 break; 722 //------------------ 723 // TOP transitions 724 //------------------ 725 case 'topSlide': 726 case 'topSlideOut': 727 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 728 $( 'img.slide', self.elem ).eq( prev ).animate( 729 {'top': '-='+height+'px' }, 730 transition_speed * 1000, 731 self.options['easing'], 732 function(){ 733 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 1 }); 734 $( 'img.slide', self.elem ).eq( prev ).css({ 'top': '+='+height+'px' }); 735 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'z-index': 3 }); 736 $( 'img.slide', self.elem ).eq( next ).css({ 'z-index': 2 }); 737 self.repeatOrStop( transition_speed, repeat ); 738 } 739 ); 740 break; 741 case 'topSlideIn': 742 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 743 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'z-index': 3 }); 744 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 2 }); 745 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'top': '-'+height+'px' }); 746 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 747 {'top': '+='+height+'px' }, 748 transition_speed * 1000, 749 self.options['easing'], 750 function(){ 751 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 1 }); 752 $( 'img.slide', self.elem ).eq( next ).css({ 'z-index': 2 }); 753 self.repeatOrStop( transition_speed, repeat ); 754 } 755 ); 756 break; 757 case 'topPushIn': 758 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 759 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( { 'top': '-='+height+'px'} ); 760 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 761 {'top': 0}, 762 transition_speed*1000, 763 self.options['easing'] 764 ); 765 $( 'img.slide', self.elem ).eq( prev ).animate( 766 {'top': '+='+height+'px' }, 767 transition_speed * 1000, 768 self.options['easing'], 769 function(){ 770 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 771 $( 'img.slide', self.elem ).eq( prev ).css( { 'top': '-='+height+'px' } ); 772 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 773 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 774 self.repeatOrStop( transition_speed, repeat ); 775 } 776 ); 777 break; 778 //--------------------- 779 // BOTTOM transitions 780 //--------------------- 781 case 'bottomSlide': 782 case 'bottomSlideOut': 783 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 784 $( 'img.slide', self.elem ).eq( prev ).animate( 785 {'top': '+='+height+'px' }, 786 transition_speed * 1000, 787 self.options['easing'], 788 function(){ 789 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 790 $( 'img.slide', self.elem ).eq( prev ).css( { 'top': '-='+height+'px' } ); 791 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 792 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 793 self.repeatOrStop( transition_speed, repeat ); 794 } 795 ); 796 break; 797 case 'bottomSlideIn': 798 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 799 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'z-index': 3 }); 800 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 2 }); 801 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css({ 'top': '+'+height+'px' }); 802 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 803 {'top': '-='+height+'px' }, 804 transition_speed * 1000, 805 self.options['easing'], 806 function(){ 807 $( 'img.slide', self.elem ).eq( prev ).css({ 'z-index': 1 }); 808 $( 'img.slide', self.elem ).eq( next ).css({ 'z-index': 2 }); 809 self.repeatOrStop( transition_speed, repeat ); 810 } 811 ); 812 break; 813 case 'bottomPushIn': 814 var height = $( 'img.slide', self.elem ).eq( prev ).height(); 815 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( { 'top': '+='+height+'px'} ); 816 $( 'img.slide', self.elem ).eq( self.obj['current'] ).animate( 817 {'top': 0}, 818 transition_speed*1000, 819 self.options['easing'] 820 ); 821 $( 'img.slide', self.elem ).eq( prev ).animate( 822 {'top': '-='+height+'px' }, 823 transition_speed * 1000, 824 self.options['easing'], 825 function(){ 826 $( 'img.slide', self.elem ).eq( prev ).css( 'z-index', 1 ); 827 $( 'img.slide', self.elem ).eq( prev ).css( { 'top': '+='+height+'px' } ); 828 $( 'img.slide', self.elem ).eq( self.obj['current'] ).css( 'z-index', 3 ); 829 $( 'img.slide', self.elem ).eq( next ).css( 'z-index', 2 ); 830 self.repeatOrStop( transition_speed, repeat ); 831 } 832 ); 833 break; 834 } 835 } 836 837 nu_imgswitch.prototype.repeatOrStop = function( transition_speed, repeat ) { 838 var self = this; 839
840 //---------------------- 841 // Don't loop images 842 //---------------------- 843 if ( self.options['stop_on_last'] ) { 844 if ( $( 'img.slide', self.elem ).length == ( self.obj['current']+1 ) ) { 845 self.fullStop(); 846 return; 847 } 848 } 849 850 if ( typeof repeat != 'undefined' && repeat > 1 ) { 851 repeat--; 852 self.currentPlus(); 853 self.go( transition_speed, repeat ); 854 } 855 } 856 857 nu_imgswitch.prototype.create = function() { 858 var self = this; 859 860 //--------------------------- 861 // Set prerun configuration 862 //--------------------------- 863 //--------------------------- 864 // Set height & width 865 //--------------------------- 866 self.obj['width'] = self.options['width']; 867 self.obj['height'] = self.options['height']; 868 if ( self.options['width'] != null && typeof self.options['width'] == 'string' ) { 869 self.obj['width'] = self.options['width'].replace( 'px', ''); 870 } 871 if ( self.options['height'] != null && typeof self.options['height'] == 'string' ) { 872 self.obj['height'] = self.options['height'].replace( 'px', ''); 873 } 874 //----------------------------------------------------- 875 // Mark existing images as slides so there will be no 876 // confusion with UI images 877 //----------------------------------------------------- 878 $( 'img', self.elem ).each( function(){ 879 $( this ).addClass('slide'); 880 self.obj['total_imgs']++; 881 }); 882 883 884 //------------------------------------------------------------ 885 // If only one image is set exit. No need to use an image 886 // switcher with one image obviously. 887 //------------------------------------------------------------ 888 if ( self.obj['total_imgs'] == 1 ) { 889 return; 890 } 891 892 //---------------------------------------------------------------- 893 // If no explicit dimensions are set we have to do a little work 894 // to get accurate image dimensions. 895 //---------------------------------------------------------------- 896 if ( self.options['width'] == null && self.options['height'] == null ) { 897 //-------------------------------------------- 898 // Get a dimension coefficient from an image 899 //-------------------------------------------- 900 var src = $( 'img:first', self.elem ).attr( 'src' ); 901 var firstImg = new Image(); 902 firstImg.onload = function() { 903 self.obj['coeff'] = this.height / this.width; 904 self.obj['width'] = $( self.elem ).parent().width(); 905 self.obj['height'] = self.obj['width'] * self.obj['coeff']; 906 self.config(); 907 self.start(); 908 }; 909 firstImg.src = src; 910 } 911 else { 912 self.config(); 913 self.start(); 914 } 915 } 916 917 nu_imgswitch.prototype.config = function() { 918 var self = this; 919 920 //----------------------------------------- 921 // Hide all children except the first one 922 //----------------------------------------- 923 $(self.elem).css( { 'width': self.obj['width'], 'height': self.obj['height'] } ); 924 $( 'img.slide', self.elem ).css( { 'width': self.obj['width'], 'height': self.obj['height'] } ); 925 $( 'img.slide', self.elem ).css( 'display', 'none' ); 926 $( 'img.slide', self.elem ).eq(0).css( 'display', 'block' ); 927 928 //-------------------------------------------- 929 // If button self.options are set use manual mode 930 //-------------------------------------------- 931 if ( self.options['left_button'] != null && self.options['right_button'] != null ) { 932 self.buildControls(); 933 } 934 935 //----------------------------------- 936 // If dot self.options are set build 'em 937 //----------------------------------- 938 if ( self.options['dot_full'] != null && self.options['dot_empty'] != null ) { 939 self.buildDots(); 940 } 941 942 //---------------------------------------- 943 // Create the three tiered image 'stack' 944 //---------------------------------------- 945 $(self.elem).css( { 'position':'relative', 'overflow':'hidden' } ); 946 $(self.elem).css( 'z-index', 3 ); 947 $( 'img.slide', self.elem ).css( 'display', 'block' ); 948 $( 'img.slide', self.elem ).css( {'position':'absolute', 'z-index': 1 } ); 949 $( 'img.slide', self.elem ).eq(0).css( 'z-index', 3 ); 950 $( 'img.slide', self.elem ).eq(1).css( 'z-index', 2 ); 951 952 //---------------------------- 953 // Set window resize handler 954 //---------------------------- 955 if ( self.options['width'] == null && self.options['height'] == null ) { 956 $( window ).resize( function() { 957 958 self.obj['width'] = $(self.elem).parent().width(); 959 self.obj['height'] = self.obj['width'] * self.obj['coeff']; 960 $(self.elem).css( { 'width': self.obj['width'], 'height': self.obj['height'] } ); 961 $('img.slide', self.elem).css( { 'width': self.obj['width'], 'height': self.obj['height'] } ); 962 963 //---------------------- 964 // Reposition controls 965 //---------------------- 966 self.positionControls(); 967 968 //------------------ 969 // Reposition dots 970 //------------------ 971 self.positionDots(); 972 }); 973 } 974 } 975 976 nu_imgswitch.prototype.stop = function() { 977 var self = this; 978
979 clearInterval( self.obj['running'] ); 980 self.obj['running'] = null; 981 } 982 983 //------------------------------------------------------------ 984 // Will stop autorun completely. 985 //------------------------------------------------------------ 986 nu_imgswitch.prototype.fullStop = function() { 987 var self = this; 988 989 self.stop(); 990 self.obj['full_stop'] = true; 991 self.start(); 992 } 993 994 nu_imgswitch.prototype.start = function() { 995 var self = this; 996 997 //------------------------------------------------------------ 998 // If 'click_only' option is set don't start auto switching 999 //------------------------------------------------------------ 1000 if ( self.options['click_only'] == null ) { 1001 //------------------ 1002 // Kick things off 1003 //------------------ 1004 self.obj['running'] = setInterval( 1005 function() { 1006 self.running_check(); 1007 }, 1008 self.options['speed'] * 1000 1009 ); 1010 //--------------------------------------- 1011 // Mouse over will stop the transitions 1012 //--------------------------------------- 1013 $(self.elem).mouseenter( function(e) { 1014 self.stop(); 1015 }); 1016 //-------------------------------------------- 1017 // Mouse out will start the transition again 1018 //-------------------------------------------- 1019 $(self.elem).mouseleave( function(e) { 1020 //---------------------------------------------------- 1021 // Unless manual mode has been triggered by a user's 1022 // control button click 1023 //---------------------------------------------------- 1024 if ( self.obj['control_clicked'] != true && self.obj['running'] == null ) { 1025 self.obj['running'] = setInterval( 1026 function() { 1027 self.running_check(); 1028 }, 1029 self.options['speed'] * 1000 1030 ); 1031 } 1032 }); 1033 } 1034 } 1035 1036 nu_imgswitch.prototype.running_check = function() { 1037 var self = this; 1038 if ( ! self.obj['full_stop'] ) { 1039 self.dotUpdate(); 1040 self.currentPlus(); 1041 self.go( self.options['transition_speed'] ); 1042 } 1043 } 1044 1045 //---------------- 1046 // Extend JQuery 1047 //---------------- 1048 $.fn.nu_imgswitch = function( options ) { 1049 var id = $(this).selector; 1050 return this.each( function() { 1051 $.data( this, id, new nu_imgswitch( this, options ) ); 1052 }); 1053 }; 1054})(jQuery); 1055
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.