1/********************************************************* 2 * Gallery plugin 3 *********************************************************/ 4 5(function($) { 6 7 var sliders = {}; 8 9 $.fn.gallery = function( parameter ) 10 { 11 // Parameter um Standardwerte erweitern, die nicht angegeben wurden 12 parameter = $.extend({}, $.fn.gallery.defaults, parameter); 13 14 options = parameter; 15 16 // Objektliste durchlaufen 17 return this.each(function() { 18 _start($(this)); 19 }); 20 21 // Funktionsaufruf ⦠you never know 22 function _start( curSlider ) { 23 if( options.onStart ) { 24 options.onStart(); 25 } 26 _preparation( curSlider ); 27 } 28 29 // Vorbereitungen 30 function _preparation( curSlider ) { 31 32 // ID speichern und gegebenenfalls generieren 33 var curId = _identifyEl( curSlider ); 34 35 // Itemliste auswählen 36 var curItemList = curSlider.find(options.itemsSel); 37 38 // Indikator für aktiviertes JS 39 curSlider.addClass(options.jsActiveClassName); 40 41 // Objekt zur Parameterweitergabe 42 curSlider = { 43 'obj': curSlider, 44 'curItemList': curItemList, 45 'curId': curId, 46 'curPos': parseInt('0'), 47 'curInnerPos': [], 48 'stopAnimation': false, 49 'options': options 50 } 51 52 // Aktuelles Slider-Objekt in das globale Slider-Objekt kopieren 53 sliders[curSlider.obj.attr('id')] = curSlider; 54 55 // Kontrollelemente hinzufügen 56 _addControls( curSlider ); 57 58 // Eventuelle strukturelle Ãnderungen vornehmen
59 _buildItemStructure( curSlider ); 60 61 // Item-Array aufbauen + weitere Informationen über Galerie sammeln und durchnummerieren 62 sliders[curSlider.obj.attr('id')].items = curSlider.items = getItems( curSlider ); 63 64 // Inner-Item-Array aufbauen + weitere Informationen über Galerie sammeln und durchnummerieren 65 sliders[curSlider.obj.attr('id')].innerItems = curSlider.innerItems = getInnerItems( curSlider ); 66 67 // Einblenden für Dimensionsbestimmung 68 $(curItemList).children().show(); $(curItemList).find(options.innerItemsSel).children().show(); 69 70 // Erste Items des zweiten Levens einblenden 71 $(curItemList).find(options.innerItemsSel).each(function(i){ 72 var curChild = $(this).children().eq(0); 73 var curParent = $(this).closest('.' + options.itemCountClassName + (i+1)); 74 75 if( curChild.height() >= curParent.height() ) { 76 curParent.height(curChild.height()); 77 } 78 79 if( curChild.width() >= curParent.width() ) { 80 curParent.width(curChild.width()); 81 } 82 }); 83 84 // Alle Galerie-Elemente des ersten Levels absolut positionieren und ausblenden 85 $(curItemList).children().css({ 86 position: 'absolute' 87 }).hide(); 88 89 // Alle Galerie-Elemente des zweiten Levels absolut positionieren und ausblenden 90 $(curItemList).find(options.innerItemsSel).children().css({ 91 position: 'absolute' 92 }).hide(); 93 94 // Erstes Item des ersten Levels einblenden 95 $(curItemList).children().eq(0).show(); 96 97 // Erste Items des zweiten Levens einblenden 98 $(curItemList).find(options.innerItemsSel).each(function(){ 99 var curChild = $(this).children().eq(0); 100 var curParent = $(this).parent(); 101 102 curChild.show(); 103 }); 104 105 // chosen-Klasse vergeben 106 $(curSlider.obj).find(curSlider.options.navigationList).children().eq(0).addClass(curSlider.options.chosenClassName); 107 108 // Bilderladen verhindern 109 // _dissolveInnerImgs( curSlider ); 110 111 // Autoanimation starten 112 _autoAnimate( curSlider ); 113 114 _navigation( curSlider ); 115 } 116 117 // Eventuelle strukturelle Ãnderungen vornehmen
118 function _buildItemStructure( curSlider ) { 119 120 // Nur anwenden, wenn mehr als ein Item pro View angezeigt werden soll 121 if( curSlider.options.itemsPerView > 1 ) { 122 123 // Wrapper vorbereiten 124 _decodeWrapper( curSlider ); 125 126 // Item-Liste 127 var curItems = $(curSlider.curItemList).children(); 128 129 // GröÃe der Item-Liste 130 var curItemsCount = curItems.size(); 131 132 // Wrapper-Struktur vorbereiten 133 var wrapper = curSlider.options.itemsPerViewWrapper['<'] + curSlider.options.itemsPerViewInnerWrapper['<'] + curSlider.options.itemsPerViewInnerWrapper['>'] + curSlider.options.itemsPerViewWrapper['>']; 134 135 // Temporärer Variablen-Foo 136 var curSet, curWrapper, curCount, i = 1, e = 0; 137 138 // Quantifiziert durchlaufen 139 while( e < curItemsCount ) { 140 141 // Aktuelle Anzahl der auszuwählenden Items bestimmen 142 curCount = ((e + curSlider.options.itemsPerView) >= curItemsCount) ? (curItemsCount-e) : curSlider.options.itemsPerView; 143 144 // Aktuelles Set bestimmen, immer die ersten n-Elemente, abhängig von itemsPerView 145 curSet = $(curSlider.curItemList).children(':lt(' + curCount + ')'); 146 147 // Wrapper in ein jQuery-Objekt umwandeln 148 curWrapper = $(wrapper); 149 150 // Klasse für Liste hinzufügen 151 curWrapper.find('ul').addClass(curSlider.options.itemsPerViewInnerWrapperClassName + i); 152 153 // Generierten Code an das Elternelement anhängen 154 $(curSlider.curItemList).append(curWrapper); 155 156 // Elementenset in das generierte HTML kopieren 157 curSet.appendTo($('.' + curSlider.options.itemsPerViewInnerWrapperClassName + i)); 158 159 // Zähler 160 e += curSlider.options.itemsPerView; i++; 161 } 162 } 163 } 164 165 // Kontrollelemente hinzufügen 166 function _addControls( curSlider ) { 167 var itemsCount = $(curSlider.curItemList).children().size(); 168 if( itemsCount > curSlider.options.itemsPerView && itemsCount > 0 ) { 169 $('#' + curSlider.curId).find(curSlider.options.itemsSel).after(curSlider.options.slidersControl); 170 $('#' + curSlider.curId).addClass(curSlider.options.slidersControlActiveClassName); 171 } 172 } 173 174 // Automatisierte Animationen 175 function _autoAnimate( curSlider ) { 176 var itemsCount = $(curSlider.curItemList).children().size(); 177 if( curSlider.options.autoAnimation && itemsCount > 1 ) { 178 if( sliders[curSlider.curId].curTimeout ) { 179 window.clearTimeout(sliders[curSlider.curId].curTimeout); 180 sliders[curSlider.curId].curTimeout = false; 181 } 182 183 sliders[curSlider.curId].curTimeout = window.setTimeout(function(){ 184 _autoNext( curSlider ); 185 }, curSlider.options.stopTime); 186 } 187 188 if( curSlider.options.innerAutoAnimation && curSlider.innerItems.length > 0 ) { 189 var level = 'inner'; 190 191 if( sliders[curSlider.curId].curInnerTimeout ) { 192 window.clearTimeout(sliders[curSlider.curId].curInnerTimeout); 193 sliders[curSlider.curId].curInnerTimeout = false; 194 } 195 196 sliders[curSlider.curId].curInnerTimeout = window.setTimeout(function(){ 197 _autoNext( curSlider, level ); 198 }, curSlider.options.innerStopTime); 199 } 200 } 201 202 function _autoNext( curSlider, level ) { 203 if( level != 'inner' ) { 204 changeItem('+', curSlider, curSlider.options.transitionTime, function(){ 205 _autoNext( curSlider ); 206 }); 207 } 208 else { 209 changeInnerItem('+', curSlider, curSlider.options.innerTransitionTime, function(){ 210 _autoNext( curSlider, level ); 211 }); 212 } 213 } 214 215 // Navigationselemente initialisieren 216 function _navigation( curSlider ) { 217 _navigationPrev( curSlider ); 218 _navigationNext( curSlider ); 219 _navigationPause( curSlider ); 220 _navigationList( curSlider ); 221 } 222 223 // Navigationselement zurück 224 function _navigationPrev( curSlider ) { 225 226 // Autoanimation starten 227 $(curSlider.obj).find(curSlider.options.controller + ' ' + curSlider.options.controllerPrev).click(function() { 228 changeItem('-', curSlider, curSlider.options.manualTransitionTime); 229 _autoAnimate( curSlider ); 230 231 $(this).find('a').blur(); 232 return false; 233 }); 234 } 235 236 // Navigationselement vor 237 function _navigationNext( curSlider ) { 238 239 // Autoanimation starten 240 $(curSlider.obj).find(curSlider.options.controller + ' ' + curSlider.options.controllerNext).click(function() { 241 changeItem('+', curSlider, curSlider.options.manualTransitionTime); 242 _autoAnimate( curSlider ); 243 244 $(this).find('a').blur(); 245 return false; 246 }); 247 } 248 249 // Pause bzw. Autoanimation stoppen 250 function _navigationPause( curSlider ) { 251 252 // Autoanimation starten/anhalten 253 $(curSlider.obj).find(curSlider.options.controller + ' ' + curSlider.options.controllerPause).click(function() { 254 255 if ($(this).hasClass('play')) { 256 sliders[curSlider.curId].curTimeout = window.setTimeout(function(){ 257 _autoNext( curSlider ); 258 }, curSlider.options.stopTime); 259 $(this).removeClass('play'); 260 } else { 261 if( sliders[curSlider.curId].curTimeout ) {
262 window.clearTimeout(sliders[curSlider.curId].curTimeout); 263 sliders[curSlider.curId].curTimeout = false; 264 } 265 $(this).addClass('play'); 266 } 267 return false; 268 }); 269 } 270 271 // Mittels Navigationsliste navigieren 272 function _navigationList( curSlider ) { 273 274 // Autoanimation starten 275 $(curSlider.obj).find(curSlider.options.navigationList).children().click(function(){ 276 if( !$(this).hasClass(curSlider.options.chosenClassName) ) { 277 var newPos = parseInt($(this).attr('class').replace(curSlider.options.chosenClassName, '').replace(curSlider.options.navigationItemCountClassName, ''))-1; 278 changeItem(newPos, curSlider, curSlider.options.manualTransitionTime); 279 _autoAnimate( curSlider ); 280 } 281 282 $(this).find('a').blur(); 283 return false; 284 }); 285 } 286 287 // Item-Array erstellen + weitere Informationen 288 function getItems( curSlider ) { 289 if( !_is_array( sliders[curSlider.curId].items )) { 290 sliders[curSlider.curId].items = []; 291 } 292 293 if( !curSlider.options.items.length ) { 294 $(curSlider.obj).find(curSlider.options.itemsSel).children().each(function(i) { 295 i++; $(this).addClass(curSlider.options.itemCountClassName + i); 296 sliders[curSlider.curId].items.push($(this)); 297 }); 298 299 $(curSlider.obj).find(curSlider.options.navigationList).children().each(function(i) { 300 $(this).addClass(curSlider.options.navigationItemCountClassName + (i+1)); 301 }); 302 } 303 else { 304 // ⦠305 } 306 307 return sliders[curSlider.curId].items; 308 } 309 310 // Inner-Item-Array erstellen + weitere Informationen 311 function getInnerItems( curSlider ) { 312 if( !_is_array( sliders[curSlider.curId].innerItems )) { 313 sliders[curSlider.curId].innerItems = []; 314 } 315 316 if( !curSlider.options.innerItems.length ) { 317 $(curSlider.obj).find(curSlider.options.itemsSel).children().each(function(i) { 318 $(this).find(curSlider.options.innerItemsSel).children().each(function(e) { 319 if( !_is_array( sliders[curSlider.curId].innerItems[i] )) { 320 sliders[curSlider.curId].innerItems[i] = []; 321 sliders[curSlider.curId].curInnerPos[i] = parseInt('0'); 322 } 323 324 $(this).addClass(curSlider.options.innerItemCountClassName + (e+1)); 325 sliders[curSlider.curId].innerItems[i].push($(this)); 326 }); 327 }); 328 } 329 else { 330 // ⦠331 } 332 333 return sliders[curSlider.curId].innerItems; 334 } 335 336 // Itemnummer ändern 337 function getPosition( newPos, curSlider, level ) { 338 var newCurPos = parseInt('0'); 339 340 if( level == 'inner' ) { 341 var curPos = sliders[curSlider.curId].curInnerPos[curSlider.curPos]; 342 var items = sliders[curSlider.curId].innerItems[curSlider.curPos]; 343 } 344 else { 345 var curPos = sliders[curSlider.curId].curPos; 346 var items = sliders[curSlider.curId].items; 347 } 348 349 switch( newPos ) { 350 case '+': 351 if( curPos + 1 > (items.length - 1) ) { 352 newCurPos = 0; 353 } 354 else { 355 newCurPos = curPos + 1; 356 } 357 break; 358 case '-': 359 if( curPos - 1 < 0 ) { 360 newCurPos = items.length - 1; 361 } 362 else { 363 newCurPos = curPos - 1; 364 } 365 break; 366 default: 367 if( newPos > (items.length - 1) ) { 368 newCurPos = newPos - items.length; 369 } 370 else if( newPos < 0 ) { 371 newCurPos = items.length - newPos; 372 } 373 else { 374 newCurPos = newPos; 375 } 376 } 377 378 return newCurPos; 379 } 380 381 function changeInnerItem( newPos, curSlider, transitionTime, callBack ) { 382 changeItem( newPos, curSlider, transitionTime, callBack, 'inner' ); 383 } 384 385 // Ãnderung animiert ausgeben 386 function changeItem( newPos, curSlider, transitionTime, callBack, level ) { 387 388 // Inner-Items 389 if( level == 'inner' ) { 390 var curTimeout = sliders[curSlider.curId].curInnerTimeout; 391 392 // aktuelles Item 393 var curItem = sliders[curSlider.curId].innerItems[curSlider.curPos][curSlider.curInnerPos[curSlider.curPos]]; 394 395 // neue Position bestimmen 396 newPos = sliders[curSlider.curId].curInnerPos[curSlider.curPos] = curSlider.curInnerPos[curSlider.curPos] = getPosition(newPos, curSlider, level); 397 398 // neues Item 399 var newItem = sliders[curSlider.curId].innerItems[curSlider.curPos][newPos]; 400 401 // Ãbergangszeit 402 transitionTime = ( transitionTime ) ? transitionTime : curSlider.options.innerTransitionTime; 403 404 var transition = curSlider.options.innerTransition; 405 var stopTime = curSlider.options.innerStopTime; 406 }
407 else if( !sliders[curSlider.curId].stopAnimation ) { // normale Items 408 409 // Bei Ãbergang der ersten Ebene, zweite Ebene stoppen 410 stopChangeInnerItem( curSlider ); 411 412 // Timeout der Inner-Items stoppen 413 window.clearTimeout(sliders[curSlider.curId].curInnerTimeout); 414 415 // aktuelles Item 416 var curItem = sliders[curSlider.curId].items[curSlider.curPos]; 417 418 // neue Position bestimmen 419 newPos = sliders[curSlider.curId].curPos = curSlider.curPos = getPosition(newPos, curSlider); 420 421 // neues Item 422 var newItem = sliders[curSlider.curId].items[newPos]; 423 424 // Ãbergangszeit 425 transitionTime = ( transitionTime ) ? transitionTime : curSlider.options.transitionTime; 426 427 var transition = curSlider.options.transition; 428 var curTimeout = sliders[curSlider.curId].curTimeout; 429 var stopTime = curSlider.options.stopTime; 430 431 // Navigation der Items 432 433 // aktuelle chosen-Klasse löschen 434 $(curSlider.obj).find(curSlider.options.navigationList).find('.' + curSlider.options.chosenClassName).removeClass(curSlider.options.chosenClassName); 435 436 // aktuellen Item chosen-Klasse geben 437 $(curSlider.obj).find(curSlider.options.navigationList).find('.' + curSlider.options.navigationItemCountClassName + (curSlider.curPos+1)).addClass(curSlider.options.chosenClassName); 438 } 439 440 if( curItem != newItem || ( level != 'inner' && !sliders[curSlider.curId].stopAnimation ) || (level == 'inner' && sliders[curSlider.curId].innerItems[curSlider.curPos] > 0 && !sliders[curSlider.curId].stopInnerAnimation) ) { 441 442 // für Transparenz-Ãbergang 443 switch(transition) { 444 case 'transparency': 445 $(curItem).css({ 446 zIndex: '2' 447 }); 448 $(newItem).css({ 449 zIndex: '1' 450 }).show(); 451 452 if( curTimeout ) { 453 window.clearTimeout(curTimeout); 454 curTimeout = false; 455 } 456 457 if( !level ) { 458 sliders[curSlider.curId].stopAnimation = true; 459 } 460 461 $(curItem).stop(true).fadeOut(transitionTime, function(){ 462 if( !level ) { 463 resetInnerItems( curSlider ); 464 sliders[curSlider.curId].stopAnimation = false; 465 } 466 467 if( callBack ) { 468 if( level ) { 469 sliders[curSlider.curId].curInnerTimeout = window.setTimeout(callBack, stopTime); 470 } 471 else { 472 sliders[curSlider.curId].curTimeout = window.setTimeout(callBack, stopTime); 473 } 474 475 } 476 477 if( curSlider.options.onTransitionEnd ) { 478 curSlider.options.onTransitionEnd(); 479 } 480 }); 481 break; 482 } 483 } 484 } 485 486 // Animation der Inner-Items stoppen 487 function stopChangeInnerItem( curSlider ) { 488 return sliders[curSlider.curId].stopInnerAnimation = curSlider.stopInnerAnimation = true; 489 } 490 491 // Positionsreset 492 function resetInnerItems( curSlider, curTimeout ) { 493 $(curSlider.obj).find(curSlider.options.itemsSel).children().not('.' + curSlider.options.itemCountClassName + (curSlider.curPos+1)).each(function(){ 494 var curEl = $(this); 495 var curItems = curEl.find(curSlider.options.innerItemsSel).children();
496 curItems.css({ 497 'z-index': 'auto' 498 }).hide(); 499 curItems.eq(0).show(); 500 }); 501 502 sliders[curSlider.curId].curInnerPos[curSlider.curPos] = parseInt('0'); 503 } 504 505 // function _dissolveInnerImgs( curSlider ) { 506 // $('#' + curSlider.curId).find(curSlider.options.innerItemsSel).each(function(){ 507 // $(this).find('img').not(':first').each(function(){ 508 // curEl = $(this); 509 // curSrc = curEl.attr('src'); 510 // $('<span />').addClass(curSlider.options.tempImgCon).data('src', curSrc).insertAfter(curEl); 511 // curEl.remove(); 512 // }) 513 // }) 514 // } 515 516 // ID des Elements ausgeben oder GUID generieren und ausgeben 517 function _identifyEl( el ) { 518 if( typeof el.attr('id') == undefined ) { 519 return el.attr('id'); 520 } 521 else { 522 var guid = _guid(); 523 el.attr('id', guid); 524 return guid; 525 } 526 } 527 528 // Hoffentlich einzigartige IDs ausgeben || http://plugins.jquery.com/files/jquery.identify.js_1.txt 529 function _guid( sep ) { 530 function S4() { 531 return (((1+Math.random())*0x10000)|0).toString(16).substring(1); 532 } 533 534 if( typeof sep == "undefined" ) { 535 sep = "-"; 536 } 537 538 return (S4()+S4()+sep+S4()+sep+S4()+sep+S4()+sep+S4()+S4()+S4()); 539 } 540 541 function _is_array( input ) { 542 return typeof( input ) == 'object' && ( input instanceof Array ); 543 } 544 545 function _decodeWrapper( curSlider ) { 546 curSlider.options.itemsPerViewWrapper = ( typeof(curSlider.options.itemsPerViewWrapper) == 'string' ) ? _splitWrapper(curSlider.options.itemsPerViewWrapper) : curSlider.options.itemsPerViewWrapper; 547 curSlider.options.itemsPerViewInnerWrapper = ( typeof(curSlider.options.itemsPerViewInnerWrapper) == 'string' ) ? _splitWrapper(curSlider.options.itemsPerViewInnerWrapper) : curSlider.options.itemsPerViewInnerWrapper; 548 } 549 550 function _splitWrapper(wrapper) { 551 if( typeof(wrapper) == 'string' ) { 552 var wrapperArr = wrapper.split('|'); 553 return {'<': wrapperArr[0], '>': wrapperArr[1]}; 554 } 555 else { 556 return false; 557 } 558 } 559 } 560 561 // Standardwerte festlegen 562 $.fn.gallery.defaults = { 563 itemsPerView: 1, 564 itemsPerViewWrapper: '<li>|</li>', 565 itemsPerViewInnerWrapper: '<ul>|</ul>', 566 itemsPerViewInnerWrapperClassName: 'itemWrapper-', // itemWrapper-1, itemWrapper-2, ⦠567 568 autoAnimation: false, 569 transition: 'transparency', 570 stopTime: '5000', 571 transitionTime: '100', 572 manualTransitionTime: '100', 573 574 innerAutoAnimation: true, 575 innerTransition: 'transparency', 576 innerStopTime: '5000', 577 innerTransitionTime: '100', 578 innerManualTransitionTime: '100', 579 580 chosenClassName: 'chosen', 581 582 itemsSel: '.items', 583 innerItemsSel: '.inner-items', 584 585 slidersControl: '<ul class="slider-controls"><li class="prev"><a href="#" title="zurück">zurück</a></li><li class="pause"><a href="#" title="Pause">Pause</a></li><li class="next"><a href="#" title="weiter">weiter</a></li></ul>', 586 controller: '.slider-controls', 587 controllerPrev: '.prev', 588 controllerNext: '.next', 589 controllerPause: '.pause', 590 navigationList: '.slider-menu', 591 592 // 593 // ToDo: Optionale Navigation für Inner-Items 594 // 595 596 itemCountClassName: 'slider-item-', // slider-item-1, slider-item-2, ⦠597 innerItemCountClassName: 'slider-inner-item-', // slider-inner-item-1, slider-inner-item-2, ⦠598 navigationItemCountClassName: 'slider-navigation-item-', // slider-navigation-item-1, slider-navigation-item-2, ⦠599 jsActiveClassName: 'js-active',
600 slidersControlActiveClassName: 'controls-active', 601 tempImgCon: 'temp-img-con', 602 603 onStart: false, // Callback vor jeglicher Plugin-Aktion 604 onTransitionEnd: false, // Callback nach Ãbergang 605 items: [], innerItems: [] // coming sooner or later ⦠606 }; 607})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.