1/** 2 * Aviacordion Slider - A jQuery acordion slider with video support 3 * (c) Copyright Christian "Kriesi" Budschedl 4 * http://www.kriesi.at 5 * http://www.twitter.com/kriesi/ 6 * version 3: introduces comboslide detection and fade in/out of preview images 7 */ 8 9 10(function($) 11{ 12 var pluginNameSpace = 'aviacordion', 13 14 //methods used to create the slideshow 15 methods = { 16 17 /************************************************************************ 18 methods.init: 19 20 initialize the slider by activating the image preloader if available and 21 then wait until images are loaded 22 *************************************************************************/ 23 init: function() 24 { 25 //prepare slides 26 methods.prepareSlides.apply( this ); 27 28 //start preloading images if the preloader is available 29 if(jQuery.fn.aviaImagePreloader) 30 { 31 this.aviaImagePreloader({thisData: this, delay:500}, methods.preloadingDone); 32 } 33 else 34 { 35 methods.preloadingDone.apply( this ); 36 } 37 }, 38 39 /************************************************************************ 40 methods.preloadingDone: 41 42 once images are pre loaded execute all necessary functions for the slider 43 like applying controlls and starting autorotation 44 *************************************************************************/ 45 preloadingDone: function() 46 { 47 48 //fetch slider data 49 var data = this.data( pluginNameSpace ); 50 51 //allow animation of slides: 52 data.animatingNow = false; 53 54 //now that the preloading was done increase the width ff all slides to prevent flickering when they move 55 data.slides.css({width: data.expandedSlide}); 56
57 methods.addBehavior.apply( this ); 58 59 if(data.options.autorotation) 60 { 61 methods.autorotation.apply( this ); 62 } 63 64 this.find('.slideshow_overlay').css({visibility:'visible'}); 65 this.find('.heading_clone').each(function(i) 66 { 67 var current = $(this); 68 69 setTimeout(function() 70 { 71 current.animate({opacity:0.8}); 72 }, i * 100); 73 74 }); 75 76 }, 77 78 /************************************************************************ 79 methods.prepareSlides: 80 81 addds classnames slides so we know if they are image slides, image slides 82 with video beneath or embeded videos 83 *************************************************************************/ 84 prepareSlides :function() 85 { 86 var data = this.data( pluginNameSpace ), currentslide, imageslide, videoslide, classname; 87 88 data.slides.each(function(i) 89 { 90 currentslide = $(this); 91 imageslide = currentslide.find('img'); 92 videoslide = currentslide.find('video, embed, object, iframe, .avia_video'); 93 94 if(imageslide.length && videoslide.length) 95 {
96 classname = 'comboslide'; 97 } 98 else if(videoslide.length) 99 { 100 classname = 'videoslide'; 101 } 102 else if(imageslide.length) 103 { 104 classname = 'imageslide'; 105 } 106 107 currentslide.addClass(classname); 108 $('<span class="slideshow_overlay"></span>').css({'visibility':'hidden'}).appendTo(currentslide); 109 110 111 /*aviacordion additions*/ 112 var positionData = { 113 this_slides_position: i * data.slideWidth, // position if no item is active 114 pos_active_higher: i * data.minimizedSlide, // position of the item if a higher item is active 115 pos_active_lower: ((i-1) * data.minimizedSlide) + data.expandedSlide // position of the item if a lower item is active 116 } 117 118 //save data of each slide via jquerys data method 119 currentslide.data( pluginNameSpace, positionData ); 120 121 122 //set base properties 123 currentslide.css({zIndex:i+1, left: i * data.slideWidth, display:'block', width:(data.slideWidth+2)}); // +2 to prevent flickering of items bellow the items that need to be loaded yet 124 currentslide.append('<div class="shadow"></div>'); 125 126 methods.cloneCaption(currentslide); 127 128 129 }); 130 var clones = this.find('.heading_clone'), newheight = 0; 131 clones.each(function(){var cloneH = $(this).height(); newheight = cloneH > newheight ? cloneH : newheight; }) 132 clones.css({width:data.slideWidth, height: newheight, paddingRight:data.expandedSlide, opacity:0 }); 133 }, 134 135 /************************************************************************ 136 methods.cloneCaption: 137 138 clones the available caption and creates the alternate caption versions 139 that appear in closed state 140 *************************************************************************/ 141 cloneCaption: function(currentslide) 142 { 143 var real_excerpt = currentslide.find('.slideshow_caption').css({'-webkit-text-size-adjust':'none'}), // wrapper to center the excerpt content verticaly 144 real_excerpt_height = real_excerpt.css({display:'block'}).outerHeight(), // height of the excerpt content 145 slide_heading = currentslide.find('h1:eq(0)'), // slide heading 146 cloned_heading = slide_heading.clone().appendTo(currentslide) 147 .wrap('<div class="heading_clone">').wrap('<div class="center_helper"></div>'), 148 currentslidelink = currentslide.find('a').not('.slideshow_caption a'), 149 captionlink = real_excerpt.find('a'), 150 lightboxlink = currentslide.find('a').not('.slideshow_caption a').filter('a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href$=".mov"] , a[href$=".swf"] , a[href*="vimeo.com"] , a[href*="youtube.com"] , a[href*="screenr.com"]'); 151 152 153 if(currentslidelink.length && !captionlink.length) 154 { 155 real_excerpt.css({cursor:'pointer'}).click(function() 156 { 157 if(lightboxlink.length) 158 { 159 currentslidelink.trigger('click'); 160 } 161 else 162 { 163 top.location.href = currentslidelink.attr('href'); 164 } 165 }); 166 } 167 168 real_excerpt.css({opacity:0.8, bottom: '-'+real_excerpt_height+'px'}); 169 clone_height = cloned_heading.height(); 170 }, 171 172 addBehavior: function() 173 { 174 var current = this, data = this.data( pluginNameSpace ); 175 176 if(data.isIos) 177 { 178 data.slides.each(function() 179 { 180 var slide = $(this), 181 overlay = $('<div class="ios_overlay"></div>').appendTo(slide).css({position:'absolute',top:0,left:0,right:0,bottom:0,zIndex:1000}); 182 }); 183 184 } 185 186 //show videos 187 data.slides.bind('click.'+pluginNameSpace, function() 188 { 189 190 var clicked_item = $(this); 191 192 if(data.isIos) 193 { 194 data.slides.find('.ios_overlay').css({display:'block'}); 195 var overlay = clicked_item.find('.ios_overlay:visible'); 196 197 if(overlay.length) 198 { 199 overlay.css({display:'none'}); 200 } 201 } 202 203
204 if(!data.isIos && clicked_item.is('.comboslide')) 205 { 206 methods.showvideo.apply(current, [clicked_item]); 207 methods.autorotationStop.apply(current); 208 return false; 209 } 210 }).bind(data.options.event+"."+pluginNameSpace, function(event, continue_autoslide) 211 { 212 213 //stop autoslide on userinteraction 214 if(!continue_autoslide) 215 { 216 methods.autorotationStop.apply( current ); 217 } 218 219 var currentslide = $(this); 220 var objData = currentslide.data( pluginNameSpace ); 221 var index = data.slides.index(currentslide); 222 var cloned_heading = currentslide.find('.heading_clone'); 223 var real_excerpt = currentslide.find('.slideshow_caption'); 224 var excerpt_content = real_excerpt.find('.featured_caption').length; 225 226 currentslide.stop().animate({ left: objData.pos_active_higher}, 227 data.options.animationSpeed, data.options.easing); 228 229 cloned_heading.stop().animate({bottom:"-" + cloned_heading.height()}); 230 231 if(excerpt_content) real_excerpt.stop().animate({bottom:0}); 232 233 data.slides.each(function(j) 234 { 235 if (index != j) 236 { 237 var current = $(this), 238 currentobjData = current.data( pluginNameSpace ), 239 new_pos = currentobjData.pos_active_higher; 240 241 if(index < j) { new_pos = currentobjData.pos_active_lower; } 242 243 current.stop().animate({ left: new_pos }, 244 data.options.animationSpeed, data.options.easing); 245 } 246 }); 247 248 249 250 }).bind("mouseleave."+pluginNameSpace, function() 251 { 252 253 var currentslide = $(this), 254 cloned_heading = currentslide.find('.heading_clone'), 255 real_excerpt = currentslide.find('.slideshow_caption'), 256 real_excerpt_height = real_excerpt.outerHeight(); 257 258 cloned_heading.stop().animate({bottom:0}); 259 real_excerpt.stop().animate({bottom:'-'+real_excerpt_height+'px'}); 260 261 }); 262 263 264 265 //set mouseout event: expand all slides to no-slide-active position and width 266 this.bind("mouseleave."+pluginNameSpace, function() 267 { 268 data.slides.each(function(i) 269 { 270 var currentslide = $(this), 271 objData = currentslide.data( pluginNameSpace ), 272 new_pos = objData.this_slides_position; 273 274 currentslide.stop().animate({left: new_pos},data.options.animationSpeed, data.options.easing); 275 276 if(data.isIos) 277 { 278 currentslide.find('.ios_overlay').css({display:'block'}); 279 } 280 }); 281 282 }); 283 284 }, 285 286 /************************************************************************ 287 methods.autorotation: 288 289 start the slider autorotation 290 *************************************************************************/ 291 autorotation: function() 292 { 293 var current = this, 294 data = this.data( pluginNameSpace ), 295 time = (parseInt(data.options.autorotationSpeed) * 1000), 296 index = 0, 297 firstrun = true; 298 299 data.interval = setInterval(function() 300 { 301 if(index == data.slideCount) 302 { 303 data.slides.filter(':eq('+(index - 1)+')').trigger("mouseleave."+ pluginNameSpace); 304 index = 0; 305 firstrun = true; 306 current.trigger("mouseleave."+ pluginNameSpace); 307 } 308 else 309 { 310 if(!firstrun) data.slides.filter(':eq('+(index - 1)+')').trigger("mouseleave."+ pluginNameSpace); 311 data.slides.filter(':eq('+index+')').trigger(data.options.event+"."+pluginNameSpace,[true]); 312 313 index++; 314 firstrun = false; 315 } 316 }, 317 time); 318 }, 319 320 321 /************************************************************************ 322 methods.autorotationStop: 323 324 stop the slider autorotation 325 *************************************************************************/ 326 autorotationStop: function() 327 { 328 var data = this.data( pluginNameSpace ); 329 clearInterval(data.interval); 330 data.interval = false; 331 }, 332 333 334 335 /************************************************************************ 336 methods.showvideo: 337 338 hide image and show video instead 339 *************************************************************************/ 340 showvideo: function(clicked_item) 341 { 342 var data = this.data( pluginNameSpace ), 343 image = clicked_item.find('img'), 344 newWidth = image.width(), 345 newHeight = image.height(); 346 347 clicked_item.find('img, canvas, .slideshow_overlay, .'+data.options.captionClass).stop().fadeOut(); 348 clicked_item.find('.slideshow_video').stop().fadeIn(); 349 clicked_item.find('.slideshow_video iframe, .slideshow_video embed, .slideshow_video object').height(newHeight).width(newWidth); 350 351 }, 352 353 354 /************************************************************************ 355 methods.overwrite_defaults: 356 357 lets you overwrite options for multiple sliders on one page with different 358 settings, without the need to call the slider function multiple times 359 *************************************************************************/
360 overwrite_options: function() 361 { 362 var data = this.data( pluginNameSpace ), 363 optionsWrapper = this.parents('.slideshow_container:eq(0)'); 364 365 if(optionsWrapper.length) 366 { 367 var autoInterval = /autoslidedelay__(\d+)/; 368 var matchInterval = autoInterval.exec(optionsWrapper[0].className); 369 370 if(matchInterval != null) { data.options.autorotationSpeed = matchInterval[1]; } 371 if(optionsWrapper.is('.autoslide_false')) data.options.autorotation = false; 372 if(optionsWrapper.is('.autoslide_true')) data.options.autorotation = true; 373 374 } 375 } 376 377 }; 378 379 380 381 $.fn.aviaCordion = function(options) 382 { 383 return this.each(function() 384 { 385 var slider = $(this), data = {}, 386 387 //default slideshow settings. can be overwritten by passing different values when calling the function 388 defaults = 389 { 390 event: 'mouseover', //which event should be used to trigger the sliding 391 slides: 'li', // wich element inside the container should serve as slide 392 animationSpeed: 900, // animation duration 393 easing: 'easeOutQuint', // animation easing 394 autorotation: true, // autorotation true or false? 395 autorotationSpeed: 5, // duration between autorotation switch in Seconds 396 appendControlls: true, // should slidecontrolls be appended or should we use none/predefined, 397 captionOpacity: 0.8, 398 captionClass: 'slideshow_caption' // caption class 399 }; 400 401 //merge default options and options passed by the user, then collect some slider data 402 data.options = $.extend(defaults, options); 403 data.slides = slider.find(data.options.slides).css({display:'none'}); 404 data.slideCount = data.slides.length; 405 data.currentSlide = slider.find(data.options.slides + ':eq(0)').css({display:'block'}); 406 data.nextSlide = slider.find(data.options.slides + ':eq(1)'); 407 data.interval = false; 408 data.animatingNow = true; 409 data.isIos = navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/); 410 411 if(data.isIos) data.options.event = 'click'; 412 413 //accordion specials 414 data.expandedSlide = data.slides.width(); // size of a slide when expanded, defined in css, class ".featured" by default 415 data.slideWidth = slider.width() / data.slideCount; // width of the slides 416 data.minimizedSlide = (slider.width() - data.expandedSlide) / (data.slideCount - 1), // remaining width is shared among the non-active slides 417 418 419 420 421 //apply data to the slider to keep track of variables and states 422 slider.data( pluginNameSpace, data ); 423 424 //overwrite options with slider specific options if necessary 425 methods.overwrite_options.apply( slider ); 426 427 //initialize the slideshow 428 methods.init.apply( slider ); 429 }); 430 }; 431})(jQuery); 432 433 434
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.