1// Diapo slideshow v1.0.4 - a jQuery slideshow with many effects, transitions, easy to customize, using canvas and mobile ready, based on jQuery 1.4+ 2// Copyright (c) 2011 by Manuel Masia - www.pixedelic.com 3// Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php 4;(function($){$.fn.diapo = function(opts, callback) { 5 6 var defaults = { 7 selector : 'div', //target element 8 9 fx : 'random', 10//'random','simpleFade','curtainTopLeft','curtainTopRight','curtainBottomLeft','curtainBottomRight','curtainSliceLeft','curtainSliceRight','blindCurtainTopLeft','blindCurtainTopRight','blindCurtainBottomLeft','blindCurtainBottomRight','blindCurtainSliceBottom','blindCurtainSliceTop','stampede','mosaic','mosaicReverse','mosaicRandom','mosaicSpiral','mosaicSpiralReverse','topLeftBottomRight','bottomRightTopLeft','bottomLeftTopRight','bottomLeftTopRight','scrollLeft','scrollRight','scrollTop','scrollBottom','scrollHorz' 11 12//you can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight' 13 14 mobileFx : '', //leave empty if you want to display the same effect on mobile devices and on desktop etc. 15 16 slideOn : 'random', //next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide 17 18 gridDifference : 250, //to make the grid blocks slower than the slices, this value must be smaller than transPeriod 19 20 easing : 'easeInOutExpo', //for the complete list http://jqueryui.com/demos/effect/easing.html 21 22 mobileEasing : '', //leave empty if you want to display the same easing on mobile devices and on desktop etc. 23 24 loader : 'pie', //pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar) 25 26 loaderOpacity : .8, //0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 27 28 loaderColor : '#ffff00', 29 30 loaderBgColor : '#222222', 31 32 pieDiameter : 50, 33 34 piePosition : 'top:5px; right:5px', //this option accepts any CSS value 35 36 pieStroke : 8, 37 38 barPosition : 'bottom', //bottom, top 39 40 barStroke : 5, 41 42 navigation : true, //true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next 43 44 mobileNavigation : true, //true, false. It enables the previous and the next buttons on mobile devices 45 46 navigationHover : true, //true, false. If true navigation will be visible only on hover state 47 48 mobileNavHover : true, //true, false. If true navigation will be visible only on hover state for mobile devices 49 50 commands : true, //true, false. It enables stop and play buttons 51 52 mobileCommands : true, //true, false. It enables stop and play buttons on mobile devices 53 54 pagination : true, //true, false. It enables the pagination numbers. This is the appended code: 55 //<div id="pix_pag"> 56 //<ul id="pix_pag_ul"> 57 //<li id="pag_nav_0"><span><span>0</span></span></li> 58 //<li id="pag_nav_1"><span><span>1</span></span></li> 59 //<li id="pag_nav_2"><span><span>2</span></span></li> 60 //...etc. 61 //</ul> 62 //</div> 63 64 mobilePagination : true, //true, false. It enables the pagination numbers on mobile devices 65 66 thumbs : true, //true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices 67 68 hover : true, //true, false. Puase on state hover. Not available for mobile devices 69 70 pauseOnClick : true, //true, false. It stops the slideshow when you click the sliders. 71 72 rows : 4, 73 74 cols : 6, 75 76 slicedRows : 8, //if 0 the same value of rows 77 78 slicedCols : 12, //if 0 the same value of cols 79 80 time : 3000, //milliseconds between the end of the sliding effect and the start of the nex one 81 82 transPeriod : 1500, //lenght of the sliding effect in milliseconds 83 84 autoAdvance : true, //true, false 85 86 mobileAutoAdvance : true, //truem false. Auto-advancing for mobile devices 87 88 onStartLoading : function() { }, 89 90 onLoaded : function() { }, 91 92 onEnterSlide : function() { }, 93 94 onStartTransition : function() { } 95 }; 96 97 98 function isMobile() { //sniff a mobile browser 99 if( navigator.userAgent.match(/Android/i) || 100 navigator.userAgent.match(/webOS/i) || 101 navigator.userAgent.match(/iPad/i) || 102 navigator.userAgent.match(/iPhone/i) || 103 navigator.userAgent.match(/iPod/i) 104 ){ 105 return true; 106 } 107 } 108 109 var opts = $.extend({}, defaults, opts); 110 111 var elem = this; 112 113 var h = elem.height(); 114 var w = elem.width(); 115 116 var u; 117 118//Define some difference if is a mobile device or not 119 var clickEv, 120 autoAdv, 121 navigation, 122 navHover, 123 commands, 124 pagination; 125 126 if (isMobile()) { 127 clickEv = 'tap'; 128 } else { 129 clickEv = 'click'; 130 } 131 132 if(isMobile()){ 133 autoAdv = opts.mobileAutoAdvance; 134 } else { 135 autoAdv = opts.autoAdvance; 136 } 137 138 if(autoAdv==false){ 139 elem.addClass('stopped'); 140 } 141 142 if(isMobile()){ 143 navigation = opts.mobileNavigation; 144 } else { 145 navigation = opts.navigation; 146 } 147 148 if(isMobile()){ 149 navHover = opts.mobileNavHover; 150 } else { 151 navHover = opts.navigationHover; 152 } 153 154 if(isMobile()){ 155 commands = opts.mobileCommands; 156 } else {
157 commands = opts.commands; 158 } 159 160 if(isMobile()){ 161 pagination = opts.mobilePagination; 162 } else { 163 pagination = opts.pagination; 164 } 165 166//The slideshow starts when all the images are loaded 167 function loadimages(imgArr,callback) { 168 if (!$.browser.msie || ($.browser.msie && $.browser.version == 9)) { 169 var imagesLoaded = 0; 170 opts.onStartLoading.call(this); 171 $.each(imgArr, function(i, image) { 172 173 var img = new Image(); 174 175 img.onload = function() { 176 imagesLoaded++; 177 if (imagesLoaded == imgArr.length) { 178 opts.onLoaded.call(this); 179 callback(); 180 } 181 }; 182 183 img.src = image; 184 185 }); 186 } else { 187 callback(); 188 } 189 } 190 191 192 193 if(elem.length!=0){ 194 195 var selector = $('> '+ opts.selector, elem).not('#pix_canvas').not('#pix_canvas_wrap').not('#pix_next').not('#pix_prev').not('#pix_commands'); 196 selector.wrapInner('<div class="pix_relativize" style="width:'+w+'px; height:'+h+'px" />'); //wrap a div for the position of absolute elements 197 var amountSlide = selector.length; //how many sliders 198 199 var nav; //nextSlide(nav) 200 201 function imgFake() { //this function replace elements such as iframes or objects with an image stored in data-fake attribute 202 $('*[data-fake]',elem).each(function(){ 203 var t = $(this); 204 var imgFakeUrl = t.attr('data-fake'); 205 var imgFake = new Image(); 206 imgFake.src = imgFakeUrl; 207 t.after($(imgFake).attr('class','imgFake')); //the image has class imgFake 208 var clone = t.clone(); 209 t.remove(); //I remove the element after cloning so it is initialized only when it appears 210 $('.elemToHide').show(); 211 $(imgFake)[clickEv](function(){ 212 $(this).hide().after(clone); 213 $('.elemToHide').hide(); 214 }); 215 }); 216 } 217 218 imgFake(); 219 220 221 if(opts.hover==true){ //if the option "hover" is true I stop the slideshow on mouse over and I resume it on mouse out 222 if(!isMobile()){ 223 elem.hoverIntent({ 224 over: function(){ 225 elem.addClass('stopped'); 226 }, 227 out: function(){ 228 if(autoAdv!=false){ 229 elem.removeClass('stopped'); 230 } 231 }, 232 timeout: 0 233 }); 234 } 235 } 236 237 if(navHover==true){ //if the option is true I show the next and prev button only on mouse over 238 if(isMobile()){ 239 elem.live('vmouseover',function(){ 240 $('#pix_prev, #pix_next').animate({opacity:1},200); 241 }); 242 elem.live('vmouseout',function(){ 243 $('#pix_prev, #pix_next').delay(500).animate({opacity:0}
243,200); 244 }); 245 } else { 246 elem.hover(function(){ 247 $('#pix_prev, #pix_next').stop(true,false).animate({opacity:1},200); 248 },function(){ 249 $('#pix_prev, #pix_next').stop(true,false).animate({opacity:0},200); 250 }); 251 } 252 } 253 254 255 $.fn.diapoStop = function() { 256 autoAdv = false; 257 elem.addClass('stopped'); 258 if($('#pix_stop').length){ 259 $('#pix_stop').fadeOut(100,function(){ 260 $('#pix_play').fadeIn(100); 261 if(opts.loader!='none'){ 262 $('#pix_canvas').fadeOut(100); 263 } 264 }); 265 } else { 266 if(opts.loader!='none'){ 267 $('#pix_canvas').fadeOut(100); 268 } 269 } 270 } 271 272 $('#pix_stop').live('click',function(){ //stop function 273 elem.diapoStop(); 274 }); 275 276 $.fn.diapoPlay = function() { 277 autoAdv = true; 278 elem.removeClass('stopped'); 279 if($('#pix_play').length){ 280 $('#pix_play').fadeOut(100,function(){ 281 $('#pix_stop').fadeIn(100); 282 if(opts.loader!='none'){ 283 $('#pix_canvas').fadeIn(100); 284 } 285 }); 286 } else { 287 if(opts.loader!='none'){ 288 $('#pix_canvas').fadeIn(100); 289 } 290 } 291 } 292 293 $('#pix_play').live('click',function(){ //play function 294 elem.diapoPlay(); 295 }); 296 297 if(opts.pauseOnClick==true){ //if option is true I stop the slideshow if the user clicks on the slider 298 selector[clickEv](function(){ 299 autoAdv = false; 300 elem.addClass('stopped'); 301 $('#pix_stop').fadeOut(100,function(){ 302 $('#pix_play').fadeIn(100); 303 $('#pix_canvas').fadeOut(100); 304 }); 305 }); 306 } 307 308 309 var allImg = new Array(); //I create an array for the images of the slideshow 310 $('img', elem).each( function() { 311 allImg.push($(this).attr('src')); //all the images are pushed in the array 312 }); 313 if (!$.browser.msie) { //sorry IE8- has some problem with this 314 $('div, span, a', elem).each(function(){ //I check all the background images in the sliders and I push them into the array 315 var bG = $(this).css('background'); 316 var bG2 = $(this).attr('style'); 317 if(typeof bG !== 'undefined' && bG !== false && bG.indexOf("url") != -1) { 318 var bGstart = bG.lastIndexOf('url(')+4; 319 var bGfinish = bG.lastIndexOf(')'); 320 bG = bG.substring(bGstart,bGfinish); 321 bG = bG.replace(/'/g,''); 322 bG = bG.replace(/"/g,''); 323 allImg.push(bG); 324 } else if (typeof bG2 !== 'undefined' && bG2 !== false && bG2.indexOf("url") != -1) { 325 var bG2start = bG2.lastIndexOf('url(')+4; 326 var bG2finish = bG2.lastIndexOf(')'); 327 bG2 = bG2.substring(bG2start,bG2finish); 328 bG2 = bG2.replace(/'/g,''); 329 bG2 = bG2.replace(/"/g,''); 330 allImg.push(bG2); 331 } 332 }); 333 } 334 335 336 loadimages(allImg,nextSlide); //when all the images in the array are loaded nextSlide function starts 337 338 } 339 340 341 function shuffle(arr) { //to randomize the effect 342 for( 343 var j, x, i = arr.length; i; 344 j = parseInt(Math.random() * i), 345 x = arr[--i], arr[i] = arr[j], arr[j] = x 346 ); 347 return arr; 348 } 349 350 function isInteger(s) { //to check if a number is integer 351 return Math.ceil(s) == Math.floor(s); 352 } 353 354 if (($.browser.msie && $.browser.version < 9) || opts.loader == 'bar') { //IE8- has some problems with canvas, I prefer to use a simple loading bar in CSS 355 elem.append('<span id="pix_canvas" />'); 356 var canvas = $("#pix_canvas"); 357 if(opts.barPosition=='top'){ 358 canvas.css({'top':0}); 359 } else { 360 canvas.css({'bottom':0}); 361 } 362 canvas.css({'position':'absolute', 'left':0, 'z-index':1001, 'height':opts.barStroke, 'width':0, 'background-color':opts.loaderColor}); 363 } else { 364 elem.append('<canvas id="pix_canvas"></canvas>'); 365 var G_vmlCanvasManager; 366 var canvas = document.getElementById("pix_canvas"); 367 canvas.setAttribute("width", opts.pieDiameter); 368 canvas.setAttribute("height", opts.pieDiameter); 369 canvas.setAttribute("style", "position:absolute; z-index:1002; "+opts.piePosition); 370 var rad; 371 var radNew; 372 373 if (canvas && canvas.getContext) { 374 var ctx = canvas.getContext("2d"); 375 ctx.rotate(Math.PI*(3/2)); 376 ctx.translate(-opts.pieDiameter,0); 377 } 378 379 } 380 if(opts.loader=='none' || autoAdv==false) { //hide the loader if you want 381 $('#pix_canvas, #pix_canvas_wrap').hide(); 382 } 383 384 if(navigation==true) { //I create the next/prev buttons 385 elem.append('<div id="pix_prev" />').append('<div id="pix_next" />'); 386 $('#pix_prev').animate({opacity:0}
386,200); 387 } 388 389 elem.after('<div id="pix_pag" />'); //I create a div that will contain the play/stop button and the pagination buttons 390 if(pagination==true) { 391 $('#pix_pag').append('<ul id="pix_pag_ul" />'); 392 var li; 393 for (li = 0; li < amountSlide; li++){ 394 $('#pix_pag_ul').append('<li id="pag_nav_'+li+'" style="position:relative; z-index:1002"><span><span>'+li+'</span></span></li>'); 395 if(opts.thumbs==true) { 396 var dataThumb = selector.eq(li).attr('data-thumb'); 397 var newImg = new Image(); 398 newImg.src = dataThumb; 399 $('li#pag_nav_'+li).append($(newImg).attr('class','pix_thumb').css('position','absolute').animate({opacity:0},0)); 400 $('li#pag_nav_'+li+' > img').after('<div class="thumb_arrow" />'); 401 $('li#pag_nav_'+li+' > .thumb_arrow').animate({opacity:0},0); 402 403 if(!isMobile()){ 404 $('#pix_pag li').hover(function(){ 405 $('.pix_thumb, .thumb_arrow',this).addClass('visible').stop(true,false).animate({'margin-top':-15, opacity: 1},300,'easeOutQuad'); 406 },function(){ 407 $('.pix_thumb, .thumb_arrow',this).removeClass('visible').stop(true,false).animate({'margin-top':0, opacity: 0},150); 408 }); 409 } 410 } 411 } 412 } 413 414 if(commands==true) { 415 $('#pix_pag').append('<div id="pix_commands" />'); 416 $('#pix_pag').find('#pix_commands').append('<div id="pix_play" />').append('<div id="pix_stop" />'); 417 if(autoAdv==true){ 418 $('#pix_play').hide(); 419 $('#pix_stop').show(); 420 } else { 421 $('#pix_stop').hide(); 422 $('#pix_play').show(); 423 } 424 } 425 426 if(navHover==true){ 427 $('#pix_prev, #pix_next').animate({opacity:0}
427,0); 428 } 429 430 function canvasLoader() { 431 opts.onStartTransition.call(this); 432 rad = 0; 433 if (($.browser.msie && $.browser.version < 9) || opts.loader == 'bar') { 434 $('#pix_canvas').css({'width':0}); 435 } else { 436 ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); // clear canvas 437 } 438 } 439 440 441 canvasLoader(); 442 443 444 $('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').each(function(){ 445 $(this).css('visibility','hidden'); 446 }); 447 448 449 /*************************** FUNCTION nextSlide() ***************************/ 450 451 function nextSlide(nav){ //funzione per il fading delle immagini 452 elem.addClass('diaposliding'); //aggiunge una classe che mi dice che il fading è in corso 453 454 var vis = parseFloat($('> '+opts.selector +'.diapocurrent',elem).not('#pix_canvas').not('#pix_canvas_wrap').not('#pix_next').not('#pix_prev').not('#pix_commands').index()); //la variabile è il numero del div partendo da 0 455 456 if(nav>0){ //se siamo all'ultimo div o se ancora non ho creato nessun div 457 var i = nav-1; 458 } else if (vis == amountSlide-1) { 459 var i = 0; 460 } else { //altrimenti l'indice è l'id corrent più uno, quindi il div successivo 461 var i = vis+1; 462 } 463 464 465 466 var rows = opts.rows, 467 cols = opts.cols, 468 couples = 1, 469 difference = 0, 470 dataSlideOn, 471 time, 472 fx, 473 easing, 474 randomFx = new Array('simpleFade','curtainTopLeft','curtainTopRight','curtainBottomLeft','curtainBottomRight','curtainSliceLeft','curtainSliceRight','blindCurtainTopLeft','blindCurtainTopRight','blindCurtainBottomLeft','blindCurtainBottomRight','blindCurtainSliceBottom','blindCurtainSliceTop','stampede','mosaic','mosaicReverse','mosaicRandom','mosaicSpiral','mosaicSpiralReverse','topLeftBottomRight','bottomRightTopLeft','bottomLeftTopRight','bottomLeftTopRight','scrollLeft','scrollRight','scrollTop','scrollBottom','scrollHorz'); 475 marginLeft = 0, 476 marginTop = 0; 477 478 479 if(isMobile()){ 480 var dataFx = selector.eq(i).attr('data-fx'); 481 } else { 482 var dataFx = selector.eq(i).attr('data-mobileFx'); 483 } 484 if(typeof dataFx !== 'undefined' && dataFx!== false){ 485 fx = dataFx; 486 } else { 487 if(isMobile()&&opts.mobileFx!=''){ 488 fx = opts.mobileFx; 489 } else { 490 fx = opts.fx; 491 } 492 if(fx=='random') { 493 fx = shuffle(randomFx); 494 fx = fx[0]; 495 } else { 496 fx = fx; 497 if(fx.indexOf(',')>0){ 498 fx = fx.replace(/ /g,''); 499 fx = fx.split(','); 500 fx = shuffle(fx); 501 fx = fx[0]; 502 } 503 } 504 } 505 506 if(isMobile()&&opts.mobileEasing!=''){ 507 easing = opts.mobileEasing; 508 } else { 509 easing = opts.easing; 510 } 511 512 dataSlideOn = selector.eq(i).attr('data-slideOn'); 513 if(typeof dataSlideOn !== 'undefined' && dataSlideOn!== false){ 514 slideOn = dataSlideOn; 515 } else { 516 if(opts.slideOn=='random'){ 517 var slideOn = new Array('next','prev'); 518 slideOn = shuffle(slideOn); 519 slideOn = slideOn[0]; 520 } else { 521 slideOn = opts.slideOn; 522 } 523 } 524 525 time = selector.eq(i).attr('data-time'); 526 if(typeof time !== 'undefined' && time!== false){ 527 time = time; 528 } else { 529 time = opts.time; 530 } 531 532 if(!$(elem).hasClass('diapostarted')){ 533 fx = 'simpleFade'; 534 slideOn = 'next'; 535 $(elem).addClass('diapostarted') 536 } 537 538 switch(fx){ 539 case 'simpleFade': 540 cols = 1; 541 rows = 1; 542 break; 543 case 'curtainTopLeft': 544 if(opts.slicedCols == 0) { 545 cols = opts.cols; 546 } else { 547 cols = opts.slicedCols; 548 } 549 rows = 1; 550 break; 551 case 'curtainTopRight': 552 if(opts.slicedCols == 0) { 553 cols = opts.cols; 554 } else { 555 cols = opts.slicedCols; 556 } 557 rows = 1; 558 break; 559 case 'curtainBottomLeft': 560 if(opts.slicedCols == 0) { 561 cols = opts.cols; 562 } else { 563 cols = opts.slicedCols; 564 } 565 rows = 1; 566 break; 567 case 'curtainBottomRight': 568 if(opts.slicedCols == 0) { 569 cols = opts.cols; 570 } else { 571 cols = opts.slicedCols; 572 } 573 rows = 1; 574 break; 575 case 'curtainSliceLeft': 576 if(opts.slicedCols == 0) { 577 cols = opts.cols; 578 } else { 579 cols = opts.slicedCols; 580 } 581 rows = 1; 582 break; 583 case 'curtainSliceRight': 584 if(opts.slicedCols == 0) {
585 cols = opts.cols; 586 } else { 587 cols = opts.slicedCols; 588 } 589 rows = 1; 590 break; 591 case 'blindCurtainTopLeft': 592 if(opts.slicedRows == 0) { 593 rows = opts.rows; 594 } else { 595 rows = opts.slicedRows; 596 } 597 cols = 1; 598 break; 599 case 'blindCurtainTopRight': 600 if(opts.slicedRows == 0) { 601 rows = opts.rows; 602 } else { 603 rows = opts.slicedRows; 604 } 605 cols = 1; 606 break; 607 case 'blindCurtainBottomLeft': 608 if(opts.slicedRows == 0) { 609 rows = opts.rows; 610 } else { 611 rows = opts.slicedRows; 612 } 613 cols = 1; 614 break; 615 case 'blindCurtainBottomRight': 616 if(opts.slicedRows == 0) { 617 rows = opts.rows; 618 } else { 619 rows = opts.slicedRows; 620 } 621 cols = 1; 622 break; 623 case 'blindCurtainSliceTop': 624 if(opts.slicedRows == 0) { 625 rows = opts.rows; 626 } else { 627 rows = opts.slicedRows; 628 } 629 cols = 1; 630 break; 631 case 'blindCurtainSliceBottom': 632 if(opts.slicedRows == 0) { 633 rows = opts.rows; 634 } else { 635 rows = opts.slicedRows; 636 } 637 cols = 1; 638 break; 639 case 'stampede': 640 difference = '-'+opts.transPeriod; 641 break; 642 case 'mosaic': 643 difference = opts.gridDifference; 644 break; 645 case 'mosaicReverse': 646 difference = opts.gridDifference; 647 break; 648 case 'mosaicRandom': 649 break; 650 case 'mosaicSpiral': 651 difference = opts.gridDifference; 652 couples = 1.7; 653 break; 654 case 'mosaicSpiralReverse': 655 difference = opts.gridDifference; 656 couples = 1.7; 657 break; 658 case 'topLeftBottomRight': 659 difference = opts.gridDifference; 660 couples = 6; 661 break; 662 case 'bottomRightTopLeft': 663 difference = opts.gridDifference; 664 couples = 6; 665 break; 666 case 'bottomLeftTopRight': 667 difference = opts.gridDifference; 668 couples = 6; 669 break; 670 case 'topRightBottomLeft': 671 difference = opts.gridDifference; 672 couples = 6; 673 break; 674 case 'scrollLeft': 675 cols = 1; 676 rows = 1; 677 break; 678 case 'scrollRight': 679 cols = 1; 680 rows = 1; 681 break; 682 case 'scrollTop': 683 cols = 1; 684 rows = 1; 685 break; 686 case 'scrollBottom': 687 cols = 1; 688 rows = 1; 689 break; 690 case 'scrollHorz': 691 cols = 1; 692 rows = 1; 693 break; 694 } 695 696 var cycle = 0; 697 var blocks = rows*cols; //number of squares 698 var leftScrap = w-(Math.floor(w/cols)*cols); //difference between rounded widths and total width 699 var topScrap = h-(Math.floor(h/rows)*rows); //difference between rounded heights and total height 700 var addLeft; //1 optional pixel to the widths 701 var addTop; //1 optional pixel to the heights 702 var tAppW = 0; //I need it to calculate the margin left for the widths 703 var tAppH = 0; //I need it to calculate the margin right for the widths 704 var arr = new Array(); 705 var delay = new Array(); 706 var order = new Array(); 707 while(cycle < blocks){ 708 arr.push(cycle); 709 delay.push(cycle); 710 elem.append('<div class="diapoappended" style="display:none; overflow:hidden; position:absolute; z-index:1000" />'); 711 var tApp = $('.diapoappended:eq('+cycle+')'); 712 tApp.find('iframe').remove(); 713 if(fx=='scrollLeft' || fx=='scrollRight' || fx=='scrollTop' || fx=='scrollBottom' || fx=='scrollHorz'){ 714 selector.eq(i).clone().show().appendTo(tApp); 715 } else { 716 if(slideOn=='next'){ 717 selector.eq(i).clone().show().appendTo(tApp); 718 } else { 719 selector.eq(vis).clone().show().appendTo(tApp); 720 } 721 } 722 723 if(cycle%cols<leftScrap){ 724 addLeft = 1; 725 } else { 726 addLeft = 0; 727 } 728 if(cycle%cols==0){ 729 tAppW = 0; 730 } 731 if(Math.floor(cycle/cols)<topScrap){ 732 addTop = 1; 733 } else { 734 addTop = 0; 735 } 736 tApp.css({ 737 'height': Math.floor((h/rows)+addTop+1), 738 'left': tAppW, 739 'top': tAppH, 740 'width': Math.floor((w/cols)+addLeft+1) 741 }); 742 $('> '+opts.selector, tApp).not('#pix_canvas').not('#pix_canvas_wrap').not('#pix_next').not('#pix_prev').not('#pix_commands').css({ 743 'height': h, 744 'margin-left': '-'+tAppW+'px', 745 'margin-top': '-'+tAppH+'px', 746 'width': w 747 }); 748 tAppW = tAppW+tApp.width()-1; 749 if(cycle%cols==cols-1){ 750 tAppH = tAppH + tApp.height() - 1; 751 } 752 cycle++; 753 } 754 755 756 757 switch(fx){ 758 case 'curtainTopLeft': 759 break; 760 case 'curtainBottomLeft': 761 break; 762 case 'curtainSliceLeft': 763 break; 764 case 'curtainTopRight': 765 arr = arr.reverse(); 766 break; 767 case 'curtainBottomRight': 768 arr = arr.reverse(); 769 break; 770 case 'curtainSliceRight': 771 arr = arr.reverse(); 772 break; 773 case 'blindCurtainTopLeft': 774 break; 775 case 'blindCurtainBottomLeft': 776 arr = arr.reverse(); 777 break; 778 case 'blindCurtainSliceTop': 779 break; 780 case 'blindCurtainTopRight': 781 break; 782 case 'blindCurtainBottomRight': 783 arr = arr.reverse(); 784 break; 785 case 'blindCurtainSliceBottom': 786 arr = arr.reverse(); 787 break; 788 case 'stampede': 789 arr = shuffle(arr); 790 break; 791 case 'mosaic': 792 break; 793 case 'mosaicReverse': 794 arr = arr.reverse(); 795 break; 796 case 'mosaicRandom': 797 arr = shuffle(arr); 798 break; 799 case 'mosaicSpiral': 800 var rows2 = rows/2, x, y, z, n=0; 801 for (z = 0; z < rows2; z++){ 802 y = z; 803 for (x = z; x < cols - z - 1; x++) { 804 order[n++] = y * cols + x; 805 } 806 x = cols - z - 1; 807 for (y = z; y < rows - z - 1; y++) { 808 order[n++] = y * cols + x; 809 } 810 y = rows - z - 1; 811 for (x = cols - z - 1; x > z; x--) { 812 order[n++] = y * cols + x; 813 } 814 x = z; 815 for (y = rows - z - 1; y > z; y--) { 816 order[n++] = y * cols + x; 817 } 818 } 819 820 arr = order; 821 822 break; 823 case 'mosaicSpiralReverse': 824 var rows2 = rows/2, x, y, z, n=blocks-1; 825 for (z = 0; z < rows2; z++){ 826 y = z; 827 for (x = z; x < cols - z - 1; x++) { 828 order[n--] = y * cols + x; 829 } 830 x = cols - z - 1; 831 for (y = z; y < rows - z - 1; y++) { 832 order[n--] = y * cols + x; 833 } 834 y = rows - z - 1; 835 for (x = cols - z - 1; x > z; x--) { 836 order[n--] = y * cols + x; 837 } 838 x = z; 839 for (y = rows - z - 1; y > z; y--) { 840 order[n--] = y * cols + x; 841 } 842 } 843 844 arr = order; 845 846 break; 847 case 'topLeftBottomRight': 848 for (var y = 0; y < rows; y++) 849 for (var x = 0; x < cols; x++) { 850 order.push(x + y); 851 }
852 delay = order; 853 break; 854 case 'bottomRightTopLeft': 855 for (var y = 0; y < rows; y++) 856 for (var x = 0; x < cols; x++) { 857 order.push(x + y); 858 } 859 delay = order.reverse(); 860 break; 861 case 'bottomLeftTopRight': 862 for (var y = rows; y > 0; y--) 863 for (var x = 0; x < cols; x++) { 864 order.push(x + y); 865 } 866 delay = order; 867 break; 868 case 'topRightBottomLeft': 869 for (var y = 0; y < rows; y++) 870 for (var x = cols; x > 0; x--) { 871 order.push(x + y); 872 } 873 delay = order; 874 break; 875 } 876 877 878 879 $.each(arr, function(index, value) { 880 881 if(value%cols<leftScrap){ 882 addLeft = 1; 883 } else { 884 addLeft = 0; 885 } 886 if(value%cols==0){ 887 tAppW = 0; 888 } 889 if(Math.floor(value/cols)<topScrap){ 890 addTop = 1; 891 } else { 892 addTop = 0; 893 } 894 895 $('.interval').text(fx); 896 897 switch(fx){ 898 case 'simpleFade': 899 height = h; 900 width = w; 901 break; 902 case 'curtainTopLeft': 903 height = 0, 904 width = Math.floor((w/cols)+addLeft+1), 905 marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; 906 break; 907 case 'curtainTopRight': 908 height = 0, 909 width = Math.floor((w/cols)+addLeft+1), 910 marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; 911 break; 912 case 'curtainBottomLeft': 913 height = 0, 914 width = Math.floor((w/cols)+addLeft+1), 915 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 916 break; 917 case 'curtainBottomRight': 918 height = 0, 919 width = Math.floor((w/cols)+addLeft+1), 920 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 921 break; 922 case 'curtainSliceLeft': 923 height = 0, 924 width = Math.floor((w/cols)+addLeft+1); 925 if(value%2==0){ 926 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 927 } else { 928 marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; 929 } 930 break; 931 case 'curtainSliceRight': 932 height = 0, 933 width = Math.floor((w/cols)+addLeft+1); 934 if(value%2==0){ 935 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 936 } else { 937 marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; 938 } 939 break; 940 case 'blindCurtainTopLeft': 941 height = Math.floor((h/rows)+addTop+1), 942 width = 0, 943 marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; 944 break; 945 case 'blindCurtainTopRight': 946 height = Math.floor((h/rows)+addTop+1), 947 width = 0, 948 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 949 break; 950 case 'blindCurtainBottomLeft': 951 height = Math.floor((h/rows)+addTop+1), 952 width = 0, 953 marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; 954 break; 955 case 'blindCurtainBottomRight': 956 height = Math.floor((h/rows)+addTop+1), 957 width = 0, 958 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 959 break; 960 case 'blindCurtainSliceBottom': 961 height = Math.floor((h/rows)+addTop+1), 962 width = 0; 963 if(value%2==0){ 964 marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; 965 } else { 966 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 967 } 968 break; 969 case 'blindCurtainSliceTop': 970 height = Math.floor((h/rows)+addTop+1), 971 width = 0; 972 if(value%2==0){ 973 marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; 974 } else { 975 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 976 } 977 break; 978 case 'stampede': 979 height = 0; 980 width = 0; 981 marginLeft = (w*0.2)*(((index)%cols)-(cols-(Math.floor(cols/2))))+'px'; 982 marginTop = (h*0.2)*((Math.floor(index/cols)+1)-(rows-(Math.floor(rows/2))))+'px'; 983 break; 984 case 'mosaic': 985 height = 0; 986 width = 0; 987 break; 988 case 'mosaicReverse': 989 height = 0; 990 width = 0; 991 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 992 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 993 break; 994 case 'mosaicRandom': 995 height = 0; 996 width = 0; 997 marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; 998 marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; 999 break; 1000 case 'mosaicSpiral': 1001 height = 0; 1002 width = 0; 1003 marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; 1004 marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; 1005 break; 1006 case 'mosaicSpiralReverse': 1007 height = 0; 1008 width = 0; 1009 marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; 1010 marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; 1011 break; 1012 case 'topLeftBottomRight': 1013 height = 0; 1014 width = 0; 1015 break; 1016 case 'bottomRightTopLeft': 1017 height = 0; 1018 width = 0; 1019 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 1020 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 1021 break; 1022 case 'bottomLeftTopRight': 1023 height = 0; 1024 width = 0; 1025 marginLeft = 0; 1026 marginTop = Math.floor((h/rows)+addTop+1)+'px'; 1027 break; 1028 case 'topRightBottomLeft': 1029 height = 0; 1030 width = 0; 1031 marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; 1032 marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; 1033 break; 1034 case 'scrollRight': 1035 height = h; 1036 width = w; 1037 marginLeft = -w; 1038 break; 1039 case 'scrollLeft': 1040 height = h; 1041 width = w; 1042 marginLeft = w; 1043 break; 1044 case 'scrollTop': 1045 height = h; 1046 width = w; 1047 marginTop = h; 1048 break; 1049 case 'scrollBottom': 1050 height = h; 1051 width = w; 1052 marginTop = -h; 1053 break; 1054 case 'scrollHorz': 1055 height = h; 1056 width = w; 1057 if(vis==0 && i==amountSlide-1) { 1058 marginLeft = -w; 1059 } else if(vis<i || (vis==amountSlide-1 && i==0)) { 1060 marginLeft = w; 1061 } else { 1062 marginLeft = -w; 1063 } 1064 break; 1065 } 1066 1067 1068 var tApp = $('.diapoappended:eq('+value+')'); 1069 1070 if(typeof u !== 'undefined'){ 1071 clearInterval(u); 1072 setTimeout(canvasLoader,opts.transPeriod+difference); 1073 } 1074 1075 1076 function diapoeased() { 1077 $(this).addClass('diapoeased'); 1078 if($('.diapoeased').length==blocks){ 1079 opts.onEnterSlide.call(this); 1080 1081 $('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').each(function(){ 1082 $(this).css('visibility','hidden'); 1083 }); 1084 1085 selector.eq(i).show().css('z-index','999').addClass('diapocurrent'); 1086 selector.eq(vis).css('z-index','1').removeClass('diapocurrent'); 1087 var lMoveIn = selector.eq(i).find('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').length; 1088 1089 if (lMoveIn!=0){ 1090 $('.diapocurrent .fromLeft, .diapocurrent .fromRight, .diapocurrent .fromTop, .diapocurrent .fromBottom, .diapocurrent .fadeIn').each(function(){ 1091 if($(this).attr('data-easing')!=''){ 1092 var easeMove = $(this).attr('data-easing'); 1093 } else { 1094 var easeMove = easing; 1095 } 1096 var t = $(this); 1097 var wMoveIn = t.width(); 1098 var hMoveIn = t.outerHeight(); 1099 t.css('width',wMoveIn); 1100 var pos = t.position(); 1101 var left = pos.left; 1102 var top = pos.top; 1103 var tClass = t.attr('class'); 1104 var ind = t.index(); 1105 var hRel = t.parents('.pix_relativize').height(); 1106 var wRel = t.parents('.pix_relativize').width(); 1107 if(tClass.indexOf("fromLeft") != -1) { 1108 t.css({'left':'-'+wRel+'px','right':'auto'}); 1109 t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'left':pos.left},(time/lMoveIn)*0.2,easeMove); 1110 } else if(tClass.indexOf("fromRight") != -1) { 1111 t.css({'left':wRel+'px','right':'auto'}); 1112 t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'left':pos.left},(time/lMoveIn)*0.2,easeMove); 1113 } else if(tClass.indexOf("fromTop") != -1) { 1114 t.css({'top':'-'+hRel+'px','bottom':'auto'}); 1115 t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'top':pos.top},(time/lMoveIn)*0.2,easeMove); 1116 } else if(tClass.indexOf("fromBottom") != -1) { 1117 t.css({'top':hRel+'px','bottom':'auto'}); 1118 t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'top':pos.top},(time/lMoveIn)*0.2,easeMove); 1119 } else if(tClass.indexOf("fadeIn") != -1) { 1120 t.animate({opacity:0}
1120,0).css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({opacity:1},(time/lMoveIn)*0.2,easeMove); 1121 } 1122 }); 1123 } 1124 1125 1126 1127 $('.diapoappended').remove(); 1128 elem.removeClass('diaposliding'); //I remove this class, that means the effect is finished 1129 selector.eq(vis).hide(); 1130 1131 $('#pix_canvas').animate({opacity:opts.loaderOpacity},400); 1132 u = setInterval( 1133 function(){ 1134 if (($.browser.msie && $.browser.version < 9) || opts.loader == 'bar') { 1135 if(rad<=1 && !elem.hasClass('stopped')){ 1136 rad = rad+0.01; 1137 } else if (rad<=1 && (elem.hasClass('stopped'))){ 1138 rad = rad; 1139 } else { 1140 if(!elem.hasClass('stopped')) 1141 imgFake(); 1142 clearInterval(u); 1143 $('#pix_canvas').animate({opacity:0},200,function(){ 1144 setTimeout(canvasLoader,opts.transPeriod+difference); 1145 nextSlide(); 1146 }); 1147 } 1148 canvas.css({'width':(w*rad)}); 1149 } else { 1150 radNew = rad; 1151 ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); 1152 ctx.globalCompositeOperation = 'destination-over'; 1153 ctx.beginPath(); 1154 ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieStroke,0,Math.PI*2,false); 1155 ctx.lineWidth = opts.pieStroke; 1156 ctx.strokeStyle = opts.loaderBgColor; 1157 ctx.stroke(); 1158 ctx.closePath(); 1159 ctx.globalCompositeOperation = 'source-over'; 1160 ctx.beginPath(); 1161 ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieStroke,0,Math.PI*2*radNew,false); 1162 ctx.lineWidth = opts.pieStroke-4; 1163 ctx.strokeStyle = opts.loaderColor; 1164 ctx.stroke(); 1165 ctx.closePath(); 1166 1167 if(rad<=1 && !elem.hasClass('stopped')){ 1168 rad = rad+0.01; 1169 } else if (rad<=1 && (elem.hasClass('stopped'))){ 1170 rad = rad; 1171 } else { 1172 if(!elem.hasClass('stopped')) 1173 imgFake(); 1174 clearInterval(u); 1175 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0}
1175,200,function(){ 1176 setTimeout(canvasLoader,opts.transPeriod+difference); 1177 nextSlide(); 1178 }); 1179 } 1180 } 1181 },(time)*0.01 1182 ); 1183 } 1184 1185 } 1186 1187 1188 if(pagination==true){ 1189 $('#pix_pag li').removeClass('diapocurrent'); 1190 $('#pix_pag li').eq(i).addClass('diapocurrent'); 1191 } 1192 1193 if(fx=='scrollLeft' || fx=='scrollRight' || fx=='scrollTop' || fx=='scrollBottom' || fx=='scrollHorz'){ 1194 tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 1195 'display' : 'block', 1196 'height': height, 1197 'margin-left': marginLeft, 1198 'margin-top': marginTop, 1199 'width': width 1200 }).animate({ 1201 'height': Math.floor((h/rows)+addTop+1), 1202 'margin-top' : 0, 1203 'margin-left' : 0, 1204 'width' : Math.floor((w/cols)+addLeft+1) 1205 },(opts.transPeriod-difference),easing,diapoeased); 1206 selector.eq(vis).delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).animate({ 1207 'margin-left': marginLeft*(-1), 1208 'margin-top': marginTop*(-1) 1209 },(opts.transPeriod-difference),easing,function(){ 1210 jQuery(this).css({'margin-top' : 0,'margin-left' : 0}); 1211 }); 1212 } else { 1213 if(slideOn=='next'){ 1214 tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 1215 'display' : 'block', 1216 'height': height, 1217 'margin-left': marginLeft, 1218 'margin-top': marginTop, 1219 'width': width, 1220 'opacity' : 0 1221 }).animate({ 1222 'height': Math.floor((h/rows)+addTop+1), 1223 'margin-top' : 0, 1224 'margin-left' : 0, 1225 'opacity' : 1, 1226 'width' : Math.floor((w/cols)+addLeft+1) 1227 },(opts.transPeriod-difference),easing,diapoeased); 1228 } else { 1229 selector.eq(i).show().css('z-index','999').addClass('diapocurrent'); 1230 selector.eq(vis).css('z-index','1').removeClass('diapocurrent'); 1231 tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 1232 'display' : 'block', 1233 'height': Math.floor((h/rows)+addTop+1), 1234 'margin-top' : 0, 1235 'margin-left' : 0, 1236 'opacity' : 1, 1237 'width' : Math.floor((w/cols)+addLeft+1) 1238 }).animate({ 1239 'height': height, 1240 'margin-left': marginLeft, 1241 'margin-top': marginTop, 1242 'width': width, 1243 'opacity' : 0 1244 },(opts.transPeriod-difference),easing,diapoeased); 1245 } 1246 } 1247 1248 1249 1250 if(navigation==true){ 1251 $('#pix_prev')[clickEv](function(){ 1252 if(!elem.hasClass('diaposliding')){ 1253 var idNum = parseFloat($('div.diapocurrent',elem).index()); 1254 clearInterval(u); 1255 imgFake(); 1256 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0}
1256,0); 1257 canvasLoader(); 1258 if(idNum!=0){ 1259 nextSlide(idNum); 1260 } else { 1261 nextSlide(amountSlide); 1262 } 1263 } 1264 }); 1265 1266 $('#pix_next')[clickEv](function(){ 1267 if(!elem.hasClass('diaposliding')){ 1268 var idNum = parseFloat($('div.diapocurrent',elem).index()); 1269 clearInterval(u); 1270 imgFake(); 1271 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); 1272 canvasLoader(); 1273 if(idNum==amountSlide-1){ 1274 nextSlide(1); 1275 } else { 1276 nextSlide(idNum+2); 1277 } 1278 } 1279 }); 1280 } 1281 1282 1283 if(isMobile()){ 1284 elem.live('swipeleft',function(event){ 1285 if(!elem.hasClass('diaposliding')){ 1286 var idNum = parseFloat($('div.diapocurrent',elem).index()); 1287 clearInterval(u); 1288 imgFake(); 1289 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); 1290 canvasLoader(); 1291 if(idNum==amountSlide-1){ 1292 nextSlide(1); 1293 } else { 1294 nextSlide(idNum+2); 1295 } 1296 } 1297 }); 1298 elem.live('swiperight',function(event){ 1299 if(!elem.hasClass('diaposliding')){ 1300 var idNum = parseFloat($('div.diapocurrent',elem).index()); 1301 clearInterval(u); 1302 imgFake(); 1303 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0}
1303,0); 1304 canvasLoader(); 1305 if(idNum!=0){ 1306 nextSlide(idNum); 1307 } else { 1308 nextSlide(amountSlide); 1309 } 1310 } 1311 }); 1312 } 1313 1314 if(pagination==true){ 1315 $('#pix_pag li')[clickEv](function(){ 1316 if(!elem.hasClass('diaposliding')){ 1317 var idNum = parseFloat($(this).index()); 1318 var curNum = parseFloat($('div.diapocurrent',elem).index()); 1319 if(idNum!=curNum) { 1320 clearInterval(u); 1321 imgFake(); 1322 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); 1323 canvasLoader(); 1324 nextSlide(idNum+1); 1325 } 1326 } 1327 }); 1328 } 1329 1330 if(opts.thumbs==true){ 1331 1332 $('#pix_pag li .pix_thumb')[clickEv](function(){ 1333 if(!elem.hasClass('diaposliding')){ 1334 var idNum = parseFloat($(this).parents('li').index()); 1335 var curNum = parseFloat($('div.diapocurrent',elem).index()); 1336 if(idNum!=curNum) { 1337 clearInterval(u); 1338 imgFake(); 1339 $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); 1340 canvasLoader(); 1341 nextSlide(idNum+1); 1342 } 1343 } 1344 }); 1345 } 1346 1347 1348 1349 }); 1350 1351 1352 1353 1354 } 1355 1356 1357 1358 1359} 1360 1361})(jQuery); 1362 1363
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.