1/** 2 * Avia Fade Slider - A simple jQuery image slider that supports embedded videos 3 * (c) Copyright Christian "Kriesi" Budschedl 4 * http://www.kriesi.at 5 * http://www.twitter.com/kriesi/ 6 * Version 1: Fade Slider release 7 * Version 2: defaults are now called within the plugin 8 * version 3: introduces comboslide detection and fade in/out of preview images 9 * version 4: fades out caption for video slides, fixed preloading, requires new aviaImagePreloader now, fades out controlls if requested 10 * version 5: added the option for slideshow resizing 11 */ 12 13/** 14 * Avia Fade Slider - A simple jQuery image slider 15 * (c) Copyright Christian "Kriesi" Budschedl 16 * http://www.kriesi.at 17 * http://www.twitter.com/kriesi/ 18 * version 3: introduces comboslide detection and fade in/out of preview images 19 */ 20 21 22(function($) 23{ 24 var pluginNameSpace = 'avia_fade_slider', 25 26 //methods used to create the slideshow 27 methods = { 28 29 /************************************************************************ 30 methods.init: 31 32 initialize the slider by activating the image preloader if available and 33 then wait until images are loaded 34 *************************************************************************/ 35 init: function() 36 { 37 //start preloading images if the preloader is available 38 if(jQuery.fn.aviaImagePreloader) 39 { 40 this.aviaImagePreloader({thisData: this}, methods.preloadingDone); 41 } 42 else 43 { 44 methods.preloadingDone.apply( this ); 45 } 46 }, 47 48 /************************************************************************ 49 methods.preloadingDone: 50 51 once images are pre loaded execute all necessary functions for the slider 52 like applying controlls and starting autorotation 53 *************************************************************************/ 54 preloadingDone: function() 55 { 56 //fetch slider data 57 var data = this.data( pluginNameSpace ); 58 59 this.addClass('preloadingDone'); 60 61 //allow animation of slides: 62 data.animatingNow = false; 63 64 //prepare slides 65 methods.prepareSlides.apply( this ); 66 methods.modifyHeight.apply( this , [data.currentSlide]); 67 68 //append controlls and start autsolider if we got more than one slide and these options are set 69 if(data.slideCount > 1) 70 { 71 if(data.options.appendControlls) methods.appendControlls.apply( this ); 72 if(data.options.autorotation) methods.autorotation.apply( this ); 73 74 } 75 methods.bindEvents.apply( this ); 76 77 //show caption if available 78 if(data.options.appendCaption) methods.appendCaption.apply( this ); 79 data.allcaptions = this.find('.'+data.options.captionClass).css({display:'none'}); 80 methods.showCaption.apply( this ); 81 }, 82 83 /************************************************************************ 84 methods.prepareSlides: 85 86 addds classnames slides so we know if they are image slides, image slides 87 with video beneath or embeded videos 88 *************************************************************************/ 89 prepareSlides :function() 90 { 91 var data = this.data( pluginNameSpace ), currentslide, imageslide, videoslide, classname; 92 93 data.slides.each(function(i) 94 { 95 currentslide = $(this); 96 imageslide = currentslide.find('img'); 97 videoslide = currentslide.find('video, embed, object, iframe, .avia_video'); 98 99 if(imageslide.length && videoslide.length) 100 {
101 classname = 'comboslide'; 102 } 103 else if(videoslide.length) 104 { 105 classname = 'videoslide'; 106 } 107 else if(imageslide.length) 108 { 109 classname = 'imageslide'; 110 } 111 112 currentslide.addClass(classname).append('<span class="slideshow_overlay"></span>'); 113 114 //google chrome youtube fix: youtube videos need to be hidden and then shown before they respond to zIndex properties 115 if(classname == 'videoslide' && i == 0) 116 { 117 currentslide.css({display:"none"}); 118 setTimeout(function() 119 { 120 currentslide.css({display:"block"}); 121 },10) 122 } 123 124 }); 125 }, 126 127 /************************************************************************ 128 methods.autorotation: 129 130 start the slider autorotation 131 *************************************************************************/ 132 autorotation: function() 133 { 134 var current = this, 135 data = this.data( pluginNameSpace ), 136 time = (parseInt(data.options.autorotationSpeed) * 1000); 137 138 data.interval = setTimeout(function() 139 { 140 //switch slides 141 methods.transition.apply( current, ['next'] ); 142 143 //call this function again 144 methods.autorotation.apply( current ); 145 }, 146 time); 147 148 if(data.options.appendControlls) data.arrowControlls.play.addClass('ctrl_active').text('Pause'); 149 }, 150 151 152 /************************************************************************ 153 methods.autorotationStop: 154 155 stop the slider autorotation 156 *************************************************************************/ 157 autorotationStop: function() 158 { 159 var data = this.data( pluginNameSpace ); 160 clearTimeout(data.interval); 161 data.interval = false; 162 163 if(data.options.appendControlls && data.arrowControlls && data.arrowControlls.play && data.arrowControlls.play.length) data.arrowControlls.play.removeClass('ctrl_active').text('Play'); 164 }, 165 166 /************************************************************************ 167 methods.switchAutorotation: 168 169 switch between active and inactive autorotation state 170 *************************************************************************/ 171 switchAutorotation: function() 172 { 173 var data = this.data( pluginNameSpace ); 174 175 if(data.interval) 176 { 177 methods.autorotationStop.apply( this ); 178 } 179 else 180 { 181 methods.transition.apply( this, ['next'] ); 182 methods.autorotation.apply( this ); 183 } 184 }, 185 186 /************************************************************************ 187 methods.appendControlls: 188 189 append direct controlls as well as arrow controlls to the slider 190 *************************************************************************/ 191 appendControlls: function() 192 { 193 var data = this.data( pluginNameSpace ), 194 first = 'class="active_item" ', 195 singlecontroll = '', 196 arrowcontroll = '<a href="#" class="ctrl_back ctrl_arrow">Previous</a>'; 197 arrowcontroll += '<a href="#" class="ctrl_play ctrl_arrow">Play</a>'; 198 arrowcontroll += '<a href="#" class="ctrl_fwd ctrl_arrow">Next</a>'; 199 200 for(var i = 0; i < data.slideCount; i++) 201 { 202 singlecontroll += '<a '+first+'href="#'+i+'">'+(i+1)+'</a>'; 203 first = ''; 204 } 205
206 data.controllContainer = $('<div class="slidecontrolls">'+singlecontroll+'</div>').insertAfter(this); 207 data.arrowControllContainer = $('<div class="arrowslidecontrolls">'+arrowcontroll+'</div>').insertAfter(this); 208 data.controlls = data.controllContainer.find('a'); 209 data.arrowControlls = { 210 prev: data.arrowControllContainer.find('.ctrl_back'), 211 next: data.arrowControllContainer.find('.ctrl_fwd'), 212 play: data.arrowControllContainer.find('.ctrl_play'), 213 all: data.arrowControllContainer.find('a') 214 }; 215 }, 216 217 /************************************************************************ 218 methods.setSlides: 219 220 checks which slide should be displayed next and stores that information to 221 the this.data.nextSlide var 222 *************************************************************************/ 223 setSlides: function(selector) 224 { 225 //get slider data and set the current slide by selecting the one that is visible 226 var data = this.data( pluginNameSpace ), newIndex; 227 228 if(!data.animatingNow) 229 { 230 data.currentSlide = this.find(data.options.slides + ':visible'); 231 data.currentSlideIndex = data.slides.index(data.currentSlide); 232 233 //based on the passed selector value (next/prev/integer value) get the number of the next slide 234 switch (selector) 235 { 236 case 'next': newIndex = data.currentSlideIndex + 1 < data.slideCount ? data.currentSlideIndex + 1 : 0; break; 237 case 'prev': newIndex = data.currentSlideIndex - 1 >= 0 ? data.currentSlideIndex - 1 : data.slideCount - 1; break; 238 default: newIndex = selector; 239 } 240 241 //select the next slide and store it to data.nextSlide 242 data.nextSlide = this.find( data.options.slides + ':eq('+newIndex+')'); 243 data.currentSlideIndex = newIndex; 244 245 //check if the current slide is the same as the next one. if so skip the transition 246 if(data.nextSlide[0] == data.currentSlide[0]) data.skipTransition = true; 247 } 248 }, 249 250 /************************************************************************ 251 methods.appendCaption: 252 253 append a caption based on the image alt attribute 254 *************************************************************************/ 255 appendCaption: function() 256 { 257 var data = this.data( pluginNameSpace ), description = false, splitdesc = []; 258 259 data.slides.each(function() 260 { 261 var currentSlide = $(this); 262 description = currentSlide.find('img').attr('alt'); 263 264 if(description) splitdesc = description.split('::'); 265 266 if(splitdesc[0] != "" ) 267 { 268 if(splitdesc[1] != undefined ) 269 { 270 description = "<strong>"+splitdesc[0] +"</strong>"+splitdesc[1]; 271 } 272 else 273 { 274 description = splitdesc[0]; 275 } 276 } 277 278 if(description) 279 { 280 $('<span></span>').addClass(data.options.captionClass) 281 .html(description) 282 .css({display:'none', 'opacity':data.options.captionOpacity}) 283 .appendTo(currentSlide); 284 } 285 }); 286 287 }, 288 289 /************************************************************************ 290 methods.showCaption: 291 292 show the caption for the current slide once the slide has been revealed 293 *************************************************************************/ 294 showCaption: function() 295 { 296 var data = this.data( pluginNameSpace ); 297 298 //hide all other captions 299 data.allcaptions = this.find('.'+data.options.captionClass).css({display:'none'}).removeClass('active_caption'); 300 301 //select current caption 302 303 var caption = data.currentSlide.find('.'+data.options.captionClass).css({display:'block', opacity:0}).addClass('active_caption'); 304 305 var opacityVal = data.options.captionOpacity; 306 if(data.currentSlide.is('.caption_left_framed') || data.currentSlide.is('.caption_right_framed')) opacityVal = 0.8; 307 308 caption.animate({opacity: opacityVal}); 309 }, 310 311 /************************************************************************ 312 methods.fadeSlides: 313 314 visual fade slide transition via jQuerys animate function 315 *************************************************************************/
316 fadeSlides: function() 317 { 318 var current = $(this), data = this.data( pluginNameSpace ); 319 320 if(!data.animatingNow && !data.skipTransition) 321 { 322 methods.beforeSwitch.apply( current ); 323 data.currentSlide.animate({opacity:0}, data.options.animationSpeed, function(){ methods.switchComplete.apply( current ); }); 324 325 //check the controlls and apply the active class to the correct controll 326 if(data.options.appendControlls) data.controlls.removeClass('active_item').filter(':eq('+data.currentSlideIndex+')').addClass('active_item'); 327 } 328 329 if(data.skipTransition) data.skipTransition = false; 330 }, 331 332 333 /************************************************************************ 334 methods.moveSlides: 335 336 visual sliding transition via jQuerys animate function 337 *************************************************************************/ 338 moveSlides: function() 339 { 340 var current = $(this), data = this.data( pluginNameSpace ); 341 342 if(!data.animatingNow && !data.skipTransition) 343 { 344 methods.beforeSwitch.apply( current ); 345 346 var indexCurrent = data.slides.index(data.currentSlide), 347 indexNext = data.slides.index(data.nextSlide), 348 direction = 1, 349 positioning = -1; 350 movement = parseInt(current.width()); 351 352 if(indexCurrent < indexNext) direction = -1; 353 354 data.nextSlide.css({left: ((movement * direction) * positioning)}
354).animate({opacity:1, left: 0}, data.options.animationSpeed); 355 data.currentSlide.animate({opacity:0, left: (movement * direction)}, data.options.animationSpeed, function(){ methods.switchComplete.apply( current ); }); 356 357 //check the controlls and apply the active class to the correct controll 358 if(data.options.appendControlls) data.controlls.removeClass('active_item').filter(':eq('+data.currentSlideIndex+')').addClass('active_item'); 359 } 360 361 if(data.skipTransition) data.skipTransition = false; 362 }, 363 364 365 /************************************************************************ 366 methods.beforeSwitch: 367 368 execute this before the slide switching starts 369 *************************************************************************/ 370 beforeSwitch: function() 371 { 372 var data = this.data( pluginNameSpace ); 373 374 data.animatingNow = true; 375 data.currentSlide.css({zIndex:3}); 376 data.nextSlide.css({zIndex:2, display:'block'}); 377 378 methods.modifyHeight.apply( this ); 379 }, 380 381 /************************************************************************ 382 methods.switchComplete: 383 384 execute this once the slides have been switched 385 *************************************************************************/ 386 switchComplete: function() 387 { 388 var data = this.data( pluginNameSpace ); 389 390 data.animatingNow = false; 391 data.currentSlide.css({zIndex:2, display:'none', opacity:1}); 392 data.nextSlide.css({zIndex:3}); 393 394 //set the current slide 395 data.currentSlide = data.nextSlide; 396 397 //show image caption 398 methods.showCaption.apply( this ); 399 }, 400 401 /************************************************************************ 402 methods.transition: 403 404 switch the slides 405 *************************************************************************/ 406 transition: function(selector, autorotation) 407 { 408 var data = this.data( pluginNameSpace ); 409 410 methods.setSlides.apply( this, [selector] ); 411 412 413 //fade or slide transition 414 if(data.options.transition == 'slide') 415 { 416 methods.moveSlides.apply( this ); 417 } 418 else 419 { 420 methods.fadeSlides.apply( this ); 421 } 422 423 424 425 if('stop_autorotation' == autorotation) 426 { 427 methods.autorotationStop.apply(this); 428 } 429 }, 430 431 /************************************************************************ 432 methods.bindEvents: 433 434 bind all events for the slider 435 *************************************************************************/ 436 bindEvents: function() 437 { 438 var current = this, data = this.data( pluginNameSpace ); 439 440 //when any link within the slideshow is clicked stop the autorotation 441 this.find('a').bind('click.'+pluginNameSpace, function(){ methods.autorotationStop.apply(current); }); 442 443 //show videos 444 data.slides.bind('click.'+pluginNameSpace, function() 445 { 446 var clicked_item = $(this); 447 448 if(clicked_item.is('.comboslide')) 449 { 450 methods.showvideo.apply(current, [clicked_item]); 451 methods.autorotationStop.apply(current); 452 return false; 453 } 454 }); 455 //hide captions when showing videos 456 data.slides.filter('.comboslide, .videoslide').hover( 457 458 function() 459 { 460 $(this).find('.slideshow_caption').stop().animate({opacity:0}
460); 461 }, 462 function() 463 { 464 $(this).find('.slideshow_caption').stop().animate({opacity:1}); 465 } 466 467 ); 468 469 //bind nextslide buttons 470 current.find('.nextSlide').bind('click.'+pluginNameSpace, function() 471 { 472 methods.transition.apply(current, ['next','stop_autorotation']); 473 return false; 474 }); 475 476 477 478 //bind controll clicks 479 if(data.controlls && data.controlls.length) 480 { 481 //bind controll clicks 482 data.controlls.bind('click.'+pluginNameSpace, function() 483 { 484 var selector = this.hash.substr(1); 485 methods.transition.apply(current, [selector, 'stop_autorotation']); 486 return false; 487 }); 488 } 489 490 //bind arrowControll clicks 491 if(data.arrowControlls && data.arrowControlls.next.length) 492 { 493 //bind arrowControll clicks 494 data.arrowControlls.next.bind('click.'+pluginNameSpace, function(){ methods.transition.apply(current, ['next','stop_autorotation']); return false; }); 495 data.arrowControlls.prev.bind('click.'+pluginNameSpace, function(){ methods.transition.apply(current, ['prev','stop_autorotation']); return false; }); 496 data.arrowControlls.play.bind('click.'+pluginNameSpace, function(){ methods.switchAutorotation.apply(current); return false; }); 497 498 499 //hide arrows if mouse cursor is not hovering slider area 500 if(data.options.hideArrows) 501 { 502 data.arrowControlls.all.css({opacity:0}); 503 current.parent('.slideshow_container').hover( 504 505 function() 506 { 507 data.arrowControlls.all.stop().animate({'opacity':1}); 508 }, 509 function(event) 510 { 511 if(!$(event.relatedTarget).is('.ctrl_arrow')) 512 { 513 data.arrowControlls.all.stop().animate({'opacity':0}); 514 } 515 } 516 ); 517 } 518 } 519 520 521 522 523 524 }, 525 526 /************************************************************************ 527 methods.showvideo: 528 529 hide image and show video instead 530 *************************************************************************/ 531 showvideo: function(clicked_item) 532 { 533 var data = this.data( pluginNameSpace ); 534 535 clicked_item.find('img, canvas, .slideshow_overlay, .'+data.options.captionClass).stop().fadeOut(); 536 clicked_item.find('.slideshow_video').stop().fadeIn(); 537 538 }, 539 540 541 /************************************************************************ 542 methods.modifyHeight: 543 544 changes the height of the slideshow in case an image is smaller or bigger 545 than the slideshow container 546 *************************************************************************/ 547 modifyHeight: function(whichSlidePassed) 548 { 549 var data = this.data( pluginNameSpace ), 550 slide = whichSlidePassed || data.nextSlide; 551 552 if(data.options.resizeSlider) 553 { 554 var item = slide.find('img'), 555 video = slide.find('iframe, object, embed'), 556 sliderWidth = this.width(); 557 558 if(video.length && !item.length) 559 { 560 var videoHeight = (sliderWidth / 16) * 9; 561 video.css({height: videoHeight}); 562 item = video; 563 } 564 565 if(item.length) 566 { 567 var itemHeight = item.height(); 568 this.animate({height: itemHeight}, 600, data.options.defaultEasing); 569 } 570 } 571 }, 572 573 574 /************************************************************************ 575 methods.overwrite_defaults: 576 577 lets you overwrite options for multiple sliders on one page with different 578 settings, without the need to call the slider function multiple times 579 *************************************************************************/ 580 overwrite_options: function() 581 { 582 var data = this.data( pluginNameSpace ), 583 optionsWrapper = this.parents('.slideshow_container:eq(0)'); 584 585 if(optionsWrapper.length) 586 { 587 var autoInterval = /autoslidedelay__(\d+)/; 588 var matchInterval = autoInterval.exec(optionsWrapper[0].className); 589 590 if(matchInterval != null) { data.options.autorotationSpeed = matchInterval[1]; }
591 if(optionsWrapper.is('.autoslide_false')) data.options.autorotation = false; 592 if(optionsWrapper.is('.autoslide_true')) data.options.autorotation = true; 593 if(optionsWrapper.is('.auto_height')) data.options.resizeSlider = true; 594 if(optionsWrapper.is('.caption_full_opa')) data.options.captionOpacity = 1; 595 if(optionsWrapper.is('.transition_slide')) data.options.transition = 'slide'; 596 597 } 598 } 599 600 }; 601 602 603 604 $.fn.avia_fade_slider = function(options) 605 { 606 return this.each(function() 607 { 608 var slider = $(this), data = {}, 609 610 //default slideshow settings. can be overwritten by passing different values when calling the function 611 defaults = 612 { 613 slides: 'li', // wich element inside the container should serve as slide 614 animationSpeed: 600, // animation duration 615 autorotation: true, // autorotation true or false? 616 autorotationSpeed: 3, // duration between autorotation switch in Seconds 617 appendControlls: true, // should slidecontrolls be appended or should we use none/predefined, 618 appendCaption: false, // should a caption be created by using the slideshow images alt tag?, 619 captionOpacity: 0.8, 620 hideArrows: true, //hide slidecontroll arrows if mouse is not located over slider 621 resizeSlider: false, //resizes the slider height, in case we got different sized preview images 622 defaultEasing: 'easeOutQuint', // default easing for animations 623 captionClass: 'slideshow_caption',// caption class 624 transition: 'fade' // transition type 625 }; 626 627 //merge default options and options passed by the user, then collect some slider data 628 data.options = $.extend(defaults, options); 629 data.slides = slider.find(data.options.slides).css({display:'none'}); 630 data.slideCount = data.slides.length; 631 data.currentSlide = slider.find(data.options.slides + ':eq(0)').css({display:'block'}); 632 data.nextSlide = slider.find(data.options.slides + ':eq(1)'); 633 data.interval = false; 634 data.animatingNow = true; 635 636 637 //apply data to the slider to keep track of variables and states 638 slider.data( pluginNameSpace, data ); 639 640 //overwrite options with slider specific options if necessary 641 methods.overwrite_options.apply( slider ); 642 643 //initialize the slideshow 644 methods.init.apply( slider ); 645 }); 646 }; 647})(jQuery); 648 649 650
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.