1/** 2 * jquery.gallery.js 3 * http://www.codrops.com 4 * 5 * Copyright 2011, Pedro Botelho / Codrops 6 * Free to use under the MIT license. 7 * 8 * Date: Mon Jan 30 2012 9 */ 10 11(function( $, undefined ) { 12 13 /* 14 * Gallery object. 15 */ 16 $.Gallery = function( options, element ) { 17 18 this.$el = $( element ); 19 this._init( options ); 20 21 }; 22 23 $.Gallery.defaults = { 24 current : 0, // index of current item 25 autoplay : false,// slideshow on / off 26 interval : 2000 // time between transitions 27 }; 28 29 $.Gallery.prototype = { 30 _init : function( options ) { 31 32 this.options = $.extend( true, {}, $.Gallery.defaults, options ); 33 34 // support for 3d / 2d transforms and transitions 35 this.support3d = Modernizr.csstransforms3d; 36 this.support2d = Modernizr.csstransforms; 37 this.supportTrans = Modernizr.csstransitions; 38 39 this.$wrapper = this.$el.find('.dg-wrapper'); 40 41 this.$items = this.$wrapper.children(); 42 this.itemsCount = this.$items.length; 43 44 this.$nav = this.$el.find('nav'); 45 this.$navPrev = this.$nav.find('.dg-prev'); 46 this.$navNext = this.$nav.find('.dg-next'); 47 48 // minimum of 3 items 49 if( this.itemsCount < 3 ) { 50 51 this.$nav.remove(); 52 return false; 53 54 } 55 56 this.current = this.options.current; 57 58 this.isAnim = false; 59 60 this.$items.css({ 61 'opacity' : 0, 62 'visibility': 'hidden' 63 }); 64 65 this._validate(); 66 67 this._layout(); 68 69 // load the events 70 this._loadEvents(); 71 72 // slideshow 73 if( this.options.autoplay ) { 74 75 this._startSlideshow(); 76 77 } 78 79 }, 80 _validate : function() { 81 82 if( this.options.current < 0 || this.options.current > this.itemsCount - 1 ) { 83 84 this.current = 0; 85 86 } 87 88 }, 89 _layout : function() { 90 91 // current, left and right items 92 this._setItems(); 93 94 // current item is not changed 95 // left and right one are rotated and translated 96 var leftCSS, rightCSS, currentCSS; 97 98 if( this.support3d && this.supportTrans ) { 99 100 leftCSS = { 101 '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 102 '-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 103 '-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 104 '-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 105 'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)' 106 }; 107 108 rightCSS = { 109 '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 110 '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 111 '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 112 '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 113 'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)' 114 }; 115 116 leftCSS.opacity = 1; 117 leftCSS.visibility = 'visible'; 118 rightCSS.opacity = 1; 119 rightCSS.visibility = 'visible'; 120 121 } 122 else if( this.support2d && this.supportTrans ) { 123 124 leftCSS = { 125 '-webkit-transform' : 'translate(-350px) scale(0.8)', 126 '-moz-transform' : 'translate(-350px) scale(0.8)', 127 '-o-transform' : 'translate(-350px) scale(0.8)', 128 '-ms-transform' : 'translate(-350px) scale(0.8)', 129 'transform' : 'translate(-350px) scale(0.8)' 130 }; 131 132 rightCSS = { 133 '-webkit-transform' : 'translate(350px) scale(0.8)', 134 '-moz-transform' : 'translate(350px) scale(0.8)', 135 '-o-transform' : 'translate(350px) scale(0.8)', 136 '-ms-transform' : 'translate(350px) scale(0.8)', 137 'transform' : 'translate(350px) scale(0.8)' 138 }; 139 140 currentCSS = { 141 'z-index' : 999 142 }; 143 144 leftCSS.opacity = 1; 145 leftCSS.visibility = 'visible'; 146 rightCSS.opacity = 1; 147 rightCSS.visibility = 'visible'; 148 149 } 150 151 this.$leftItm.css( leftCSS || {} ); 152 this.$rightItm.css( rightCSS || {} ); 153 154 this.$currentItm.css( currentCSS || {} ).css({ 155 'opacity' : 1, 156 'visibility': 'visible' 157 }).addClass('dg-center'); 158 159 }, 160 _setItems : function() { 161 var _self = this; 162 this.$items.removeClass('dg-center'); 163 164 this.$currentItm = this.$items.eq( this.current ); 165 this.$leftItm = ( this.current === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$items.eq( this.current - 1 ); 166 this.$rightItm = ( this.current === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$items.eq( this.current + 1 ); 167 168 if( !this.support3d && this.support2d && this.supportTrans ) { 169 170 this.$items.css( 'z-index', 1 ); 171 this.$currentItm.css( 'z-index', 999 ); 172 173 } 174 175 // next & previous items 176 if( this.itemsCount > 3 ) { 177 178 // next item 179 this.$nextItm = ( this.$rightItm.index() === this.itemsCount - 1 ) ? this.$items.eq( 0 ) : this.$rightItm.next(); 180 this.$nextItm.css( this._getCoordinates('outright') ); 181 182 // previous item 183 this.$prevItm = ( this.$leftItm.index() === 0 ) ? this.$items.eq( this.itemsCount - 1 ) : this.$leftItm.prev(); 184 this.$prevItm.css( this._getCoordinates('outleft') ); 185 186 } 187 188 189 //neue event listener 190 this.$rightItm.on( 'click.gallery', function( event ) { 191 if( _self.options.autoplay ) { 192 clearTimeout( _self.slideshow ); 193 _self.options.autoplay = false;
194 } 195 _self._navigate('next'); 196 return false; 197 }); 198 this.$leftItm.on( 'click.gallery', function( event ) { 199 if( _self.options.autoplay ) { 200 clearTimeout( _self.slideshow ); 201 _self.options.autoplay = false; 202 } 203 _self._navigate('prev'); 204 return false; 205 }); 206 207 }, 208 _loadEvents : function() { 209 210 var _self = this; 211 212 this.$navPrev.on( 'click.gallery', function( event ) { 213 214 if( _self.options.autoplay ) { 215 216 clearTimeout( _self.slideshow ); 217 _self.options.autoplay = false; 218 219 } 220 221 _self._navigate('prev'); 222 return false; 223 224 }); 225 226 this.$navNext.on( 'click.gallery', function( event ) { 227 228 if( _self.options.autoplay ) { 229 230 clearTimeout( _self.slideshow ); 231 _self.options.autoplay = false; 232 233 } 234 235 _self._navigate('next'); 236 return false; 237 238 }); 239 240 this.$wrapper.on( 'webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function( event ) { 241 242 _self.$currentItm.addClass('dg-center'); 243 _self.$items.removeClass('dg-transition'); 244 _self.isAnim = false; 245 246 }); 247 248 }, 249 _getCoordinates : function( position ) { 250 251 if( this.support3d && this.supportTrans ) { 252 253 switch( position ) { 254 case 'outleft': 255 return { 256 '-webkit-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)', 257 '-moz-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)', 258 '-o-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)', 259 '-ms-transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)', 260 'transform' : 'translateX(-450px) translateZ(-300px) rotateY(45deg)', 261 'opacity' : 0, 262 'visibility' : 'hidden' 263 }; 264 break; 265 case 'outright': 266 return { 267 '-webkit-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)', 268 '-moz-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)', 269 '-o-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)', 270 '-ms-transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)', 271 'transform' : 'translateX(450px) translateZ(-300px) rotateY(-45deg)', 272 'opacity' : 0, 273 'visibility' : 'hidden' 274 }; 275 break; 276 case 'left': 277 return { 278 '-webkit-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 279 '-moz-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 280 '-o-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 281 '-ms-transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 282 'transform' : 'translateX(-350px) translateZ(-200px) rotateY(45deg)', 283 'opacity' : 1, 284 'visibility' : 'visible' 285 }; 286 break; 287 case 'right': 288 return { 289 '-webkit-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 290 '-moz-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 291 '-o-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 292 '-ms-transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 293 'transform' : 'translateX(350px) translateZ(-200px) rotateY(-45deg)', 294 'opacity' : 1, 295 'visibility' : 'visible' 296 }; 297 break; 298 case 'center': 299 return { 300 '-webkit-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)', 301 '-moz-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)', 302 '-o-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)', 303 '-ms-transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)', 304 'transform' : 'translateX(0px) translateZ(0px) rotateY(0deg)', 305 'opacity' : 1, 306 'visibility' : 'visible' 307 }; 308 break; 309 }; 310 311 } 312 else if( this.support2d && this.supportTrans ) { 313 314 switch( position ) { 315 case 'outleft': 316 return { 317 '-webkit-transform' : 'translate(-450px) scale(0.7)', 318 '-moz-transform' : 'translate(-450px) scale(0.7)', 319 '-o-transform' : 'translate(-450px) scale(0.7)', 320 '-ms-transform' : 'translate(-450px) scale(0.7)', 321 'transform' : 'translate(-450px) scale(0.7)', 322 'opacity' : 0, 323 'visibility' : 'hidden' 324 }; 325 break; 326 case 'outright': 327 return { 328 '-webkit-transform' : 'translate(450px) scale(0.7)', 329 '-moz-transform' : 'translate(450px) scale(0.7)', 330 '-o-transform' : 'translate(450px) scale(0.7)', 331 '-ms-transform' : 'translate(450px) scale(0.7)', 332 'transform' : 'translate(450px) scale(0.7)', 333 'opacity' : 0, 334 'visibility' : 'hidden' 335 }; 336 break; 337 case 'left': 338 return { 339 '-webkit-transform' : 'translate(-350px) scale(0.8)', 340 '-moz-transform' : 'translate(-350px) scale(0.8)', 341 '-o-transform' : 'translate(-350px) scale(0.8)', 342 '-ms-transform' : 'translate(-350px) scale(0.8)', 343 'transform' : 'translate(-350px) scale(0.8)', 344 'opacity' : 1, 345 'visibility' : 'visible' 346 }; 347 break; 348 case 'right': 349 return { 350 '-webkit-transform' : 'translate(350px) scale(0.8)', 351 '-moz-transform' : 'translate(350px) scale(0.8)', 352 '-o-transform' : 'translate(350px) scale(0.8)', 353 '-ms-transform' : 'translate(350px) scale(0.8)', 354 'transform' : 'translate(350px) scale(0.8)', 355 'opacity' : 1, 356 'visibility' : 'visible' 357 }; 358 break; 359 case 'center': 360 return { 361 '-webkit-transform' : 'translate(0px) scale(1)', 362 '-moz-transform' : 'translate(0px) scale(1)', 363 '-o-transform' : 'translate(0px) scale(1)', 364 '-ms-transform' : 'translate(0px) scale(1)', 365 'transform' : 'translate(0px) scale(1)', 366 'opacity' : 1, 367 'visibility' : 'visible' 368 }; 369 break; 370 }; 371 372 } 373 else { 374 375 switch( position ) { 376 case 'outleft' : 377 case 'outright' : 378 case 'left' : 379 case 'right' : 380 return { 381 'opacity' : 0, 382 'visibility' : 'hidden' 383 }; 384 break; 385 case 'center' : 386 return { 387 'opacity' : 1, 388 'visibility' : 'visible' 389 }; 390 break; 391 }; 392 393 } 394 395 }, 396 _navigate : function( dir ) { 397 var _self = this; 398 if( this.supportTrans && this.isAnim ) 399 return false;
400 401 this.isAnim = true; 402 //listener entfernen 403 this.$rightItm.off( 'click.gallery'); 404 this.$leftItm.off( 'click.gallery'); 405 406 switch( dir ) { 407 408 case 'next' : 409 410 this.current = this.$rightItm.index(); 411 412 // current item moves left 413 this.$currentItm.addClass('dg-transition').css( this._getCoordinates('left') ); 414 415 // right item moves to the center 416 this.$rightItm.addClass('dg-transition').css( this._getCoordinates('center') ); 417 418 // next item moves to the right 419 if( this.$nextItm ) { 420 421 // left item moves out 422 this.$leftItm.addClass('dg-transition').css( this._getCoordinates('outleft') ); 423 424 this.$nextItm.addClass('dg-transition').css( this._getCoordinates('right') ); 425 426 } 427 else { 428 429 // left item moves right 430 this.$leftItm.addClass('dg-transition').css( this._getCoordinates('right') ); 431 432 } 433 break; 434 435 case 'prev' : 436 437 this.current = this.$leftItm.index(); 438 439 // current item moves right 440 this.$currentItm.addClass('dg-transition').css( this._getCoordinates('right') ); 441 442 // left item moves to the center 443 this.$leftItm.addClass('dg-transition').css( this._getCoordinates('center') ); 444 445 // prev item moves to the left 446 if( this.$prevItm ) { 447 448 // right item moves out 449 this.$rightItm.addClass('dg-transition').css( this._getCoordinates('outright') ); 450 451 this.$prevItm.addClass('dg-transition').css( this._getCoordinates('left') ); 452 453 } 454 else { 455 456 // right item moves left 457 this.$rightItm.addClass('dg-transition').css( this._getCoordinates('left') ); 458 459 } 460 break; 461 462 }; 463 464 this._setItems(); 465 466 if( !this.supportTrans ) 467 this.$currentItm.addClass('dg-center'); 468 469 }, 470 _startSlideshow : function() { 471 472 var _self = this; 473 474 this.slideshow = setTimeout( function() { 475 476 _self._navigate( 'next' ); 477 478 if( _self.options.autoplay ) { 479 480 _self._startSlideshow(); 481 482 } 483 484 }, this.options.interval ); 485 486 }, 487 destroy : function() { 488 489 this.$navPrev.off('.gallery'); 490 this.$navNext.off('.gallery'); 491 this.$wrapper.off('.gallery'); 492 493 } 494 }; 495 496 var logError = function( message ) { 497 if ( this.console ) { 498 console.error( message ); 499 } 500 }; 501 502 $.fn.gallery = function( options ) { 503 504 if ( typeof options === 'string' ) { 505 506 var args = Array.prototype.slice.call( arguments, 1 ); 507 508 this.each(function() { 509 510 var instance = $.data( this, 'gallery' ); 511 512 if ( !instance ) { 513 logError( "cannot call methods on gallery prior to initialization; " + 514 "attempted to call method '" + options + "'" ); 515 return; 516 } 517 518 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) { 519 logError( "no such method '" + options + "' for gallery instance" ); 520 return; 521 } 522 523 instance[ options ].apply( instance, args ); 524 525 }); 526 527 } 528 else { 529 530 this.each(function() { 531 532 var instance = $.data( this, 'gallery' ); 533 if ( !instance ) { 534 $.data( this, 'gallery', new $.Gallery( options, this ) ); 535 } 536 }); 537 538 } 539 540 return this; 541 542 }; 543 544})( 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.