Team:XMU-China/diapo.js

From 2013.igem.org

// 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+ // Copyright (c) 2011 by Manuel Masia - www.pixedelic.com // Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php

(function($){$.fn.diapo = function(opts, callback) {

var defaults = { selector : 'div', //target element

fx : 'random', //'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'

//you can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight'

mobileFx : , //leave empty if you want to display the same effect on mobile devices and on desktop etc.

slideOn : 'random', //next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide

gridDifference : 250, //to make the grid blocks slower than the slices, this value must be smaller than transPeriod

easing : 'easeInOutExpo', //for the complete list http://jqueryui.com/demos/effect/easing.html

mobileEasing : , //leave empty if you want to display the same easing on mobile devices and on desktop etc.

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)

loaderOpacity : .8, //0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1

loaderColor : '#cf302d',

loaderBgColor : '#222222',

pieDiameter : 50,

piePosition : 'top:5px; right:5px', //this option accepts any CSS value

pieStroke : 8,

barPosition : 'bottom', //bottom, top

barStroke : 5,

navigation : true, //true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next

mobileNavigation : true, //true, false. It enables the previous and the next buttons on mobile devices

navigationHover : true, //true, false. If true navigation will be visible only on hover state

mobileNavHover : true, //true, false. If true navigation will be visible only on hover state for mobile devices

commands : false, //true, false. It enables stop and play buttons

mobileCommands : true, //true, false. It enables stop and play buttons on mobile devices

pagination : false, //true, false. It enables the pagination numbers. This is the appended code:

//
//
    //
  • 0
  • //
  • 1
  • //
  • 2
  • //...etc.

    //
//

mobilePagination : true, //true, false. It enables the pagination numbers on mobile devices

thumbs : false, //true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices

hover : true, //true, false. Puase on state hover. Not available for mobile devices

pauseOnClick : false, //true, false. It stops the slideshow when you click the sliders.

rows : 4,

cols : 6,

slicedRows : 8, //if 0 the same value of rows

slicedCols : 12, //if 0 the same value of cols

time : 3000, //milliseconds between the end of the sliding effect and the start of the nex one

transPeriod : 1000, //lenght of the sliding effect in milliseconds

autoAdvance : true, //true, false

mobileAutoAdvance : true, //truem false. Auto-advancing for mobile devices

onStartLoading : function() { },

onLoaded : function() { },

onEnterSlide : function() { },

onStartTransition : function() { }

   };


function isMobile() { //sniff a mobile browser if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ){ return true; } }

var opts = $.extend({}, defaults, opts);

var elem = this;

var h = elem.height(); var w = elem.width();

var u;

//Define some difference if is a mobile device or not var clickEv, autoAdv, navigation, navHover, commands, pagination;

if (isMobile()) { clickEv = 'tap'; } else { clickEv = 'click'; }

if(isMobile()){ autoAdv = opts.mobileAutoAdvance; } else { autoAdv = opts.autoAdvance; }

if(autoAdv==false){ elem.addClass('stopped'); }

if(isMobile()){ navigation = opts.mobileNavigation; } else { navigation = opts.navigation; }

if(isMobile()){ navHover = opts.mobileNavHover; } else { navHover = opts.navigationHover; }

if(isMobile()){ commands = opts.mobileCommands; } else { commands = opts.commands; }

if(isMobile()){ pagination = opts.mobilePagination; } else { pagination = opts.pagination; }

//The slideshow starts when all the images are loaded function loadimages(imgArr,callback) { if (!$.browser.msie || ($.browser.msie && $.browser.version == 9)) { var imagesLoaded = 0; opts.onStartLoading.call(this); $.each(imgArr, function(i, image) {

var img = new Image();

img.onload = function() { imagesLoaded++; if (imagesLoaded == imgArr.length) { opts.onLoaded.call(this); callback(); } };

img.src = image;

}); } else { callback(); } }


if(elem.length!=0){

var selector = $('> '+ opts.selector, elem).not('#pix_canvas').not('#pix_canvas_wrap').not('#pix_next').not('#pix_prev').not('#pix_commands'); selector.wrapInner('<div class="pix_relativize" style="width:'+w+'px; height:'+h+'px" />'); //wrap a div for the position of absolute elements var amountSlide = selector.length; //how many sliders

var nav; //nextSlide(nav)

function imgFake() { //this function replace elements such as iframes or objects with an image stored in data-fake attribute $('*[data-fake]',elem).each(function(){ var t = $(this); var imgFakeUrl = t.attr('data-fake'); var imgFake = new Image(); imgFake.src = imgFakeUrl; t.after($(imgFake).attr('class','imgFake')); //the image has class imgFake var clone = t.clone(); t.remove(); //I remove the element after cloning so it is initialized only when it appears $('.elemToHide').show(); $(imgFake)[clickEv](function(){ $(this).hide().after(clone); $('.elemToHide').hide(); }); }); }

imgFake();


if(opts.hover==true){ //if the option "hover" is true I stop the slideshow on mouse over and I resume it on mouse out if(!isMobile()){ elem.hoverIntent({ over: function(){ elem.addClass('stopped'); }, out: function(){ if(autoAdv!=false){ elem.removeClass('stopped'); } }, timeout: 0 }); } }

if(navHover==true){ //if the option is true I show the next and prev button only on mouse over if(isMobile()){ elem.live('vmouseover',function(){ $('#pix_prev, #pix_next').animate({opacity:1},200); }); elem.live('vmouseout',function(){ $('#pix_prev, #pix_next').delay(500).animate({opacity:0},200); }); } else { elem.hover(function(){ $('#pix_prev, #pix_next').stop(true,false).animate({opacity:1},200); },function(){ $('#pix_prev, #pix_next').stop(true,false).animate({opacity:0},200); }); } }


$.fn.diapoStop = function() { autoAdv = false; elem.addClass('stopped'); if($('#pix_stop').length){ $('#pix_stop').fadeOut(100,function(){ $('#pix_play').fadeIn(100); if(opts.loader!='none'){ $('#pix_canvas').fadeOut(100); } }); } else { if(opts.loader!='none'){ $('#pix_canvas').fadeOut(100); } } }

$('#pix_stop').live('click',function(){ //stop function elem.diapoStop(); });

$.fn.diapoPlay = function() { autoAdv = true; elem.removeClass('stopped'); if($('#pix_play').length){ $('#pix_play').fadeOut(100,function(){ $('#pix_stop').fadeIn(100); if(opts.loader!='none'){ $('#pix_canvas').fadeIn(100); } }); } else { if(opts.loader!='none'){ $('#pix_canvas').fadeIn(100); } } }

$('#pix_play').live('click',function(){ //play function elem.diapoPlay(); });

if(opts.pauseOnClick==true){ //if option is true I stop the slideshow if the user clicks on the slider selector[clickEv](function(){ autoAdv = false; elem.addClass('stopped'); $('#pix_stop').fadeOut(100,function(){ $('#pix_play').fadeIn(100); $('#pix_canvas').fadeOut(100); }); }); }


var allImg = new Array(); //I create an array for the images of the slideshow $('img', elem).each( function() { allImg.push($(this).attr('src')); //all the images are pushed in the array }); if (!$.browser.msie) { //sorry IE8- has some problem with this $('div, span, a', elem).each(function(){ //I check all the background images in the sliders and I push them into the array var bG = $(this).css('background'); var bG2 = $(this).attr('style'); if(typeof bG !== 'undefined' && bG !== false && bG.indexOf("url") != -1) { var bGstart = bG.lastIndexOf('url(')+4; var bGfinish = bG.lastIndexOf(')'); bG = bG.substring(bGstart,bGfinish); bG = bG.replace(/'/g,); bG = bG.replace(/"/g,); allImg.push(bG); } else if (typeof bG2 !== 'undefined' && bG2 !== false && bG2.indexOf("url") != -1) { var bG2start = bG2.lastIndexOf('url(')+4; var bG2finish = bG2.lastIndexOf(')'); bG2 = bG2.substring(bG2start,bG2finish); bG2 = bG2.replace(/'/g,); bG2 = bG2.replace(/"/g,); allImg.push(bG2); } }); }


loadimages(allImg,nextSlide); //when all the images in the array are loaded nextSlide function starts

}


function shuffle(arr) { //to randomize the effect for( var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x ); return arr; }

function isInteger(s) { //to check if a number is integer return Math.ceil(s) == Math.floor(s); }

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 elem.append('<span id="pix_canvas" />'); var canvas = $("#pix_canvas"); if(opts.barPosition=='top'){ canvas.css({'top':0}); } else { canvas.css({'bottom':0}); } canvas.css({'position':'absolute', 'left':0, 'z-index':1001, 'height':opts.barStroke, 'width':0, 'background-color':opts.loaderColor}); } else { elem.append('<canvas id="pix_canvas"></canvas>'); var G_vmlCanvasManager; var canvas = document.getElementById("pix_canvas"); canvas.setAttribute("width", opts.pieDiameter); canvas.setAttribute("height", opts.pieDiameter); canvas.setAttribute("style", "position:absolute; z-index:1002; "+opts.piePosition); var rad; var radNew;

if (canvas && canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.rotate(Math.PI*(3/2)); ctx.translate(-opts.pieDiameter,0); }

} if(opts.loader=='none' || autoAdv==false) { //hide the loader if you want $('#pix_canvas, #pix_canvas_wrap').hide(); }

if(navigation==true) { //I create the next/prev buttons elem.append('<div id="pix_prev" />').append('<div id="pix_next" />'); $('#pix_prev').animate({opacity:0},200); }

elem.after('<div id="pix_pag" />'); //I create a div that will contain the play/stop button and the pagination buttons if(pagination==true) { $('#pix_pag').append('<ul id="pix_pag_ul" />'); var li; for (li = 0; li < amountSlide; li++){

$('#pix_pag_ul').append('
  • '+li+'</li>'); if(opts.thumbs==true) { var dataThumb = selector.eq(li).attr('data-thumb'); var newImg = new Image(); newImg.src = dataThumb; $('li#pag_nav_'+li).append($(newImg).attr('class','pix_thumb').css('position','absolute').animate({opacity:0},0)); $('li#pag_nav_'+li+' > img').after('<div class="thumb_arrow" />'); $('li#pag_nav_'+li+' > .thumb_arrow').animate({opacity:0},0); if(!isMobile()){ $('#pix_pag li').hover(function(){ $('.pix_thumb, .thumb_arrow',this).addClass('visible').stop(true,false).animate({'margin-top':-15, opacity: 1},300,'easeOutQuad'); },function(){ $('.pix_thumb, .thumb_arrow',this).removeClass('visible').stop(true,false).animate({'margin-top':0, opacity: 0},150); }); } } } } if(commands==true) { $('#pix_pag').append('<div id="pix_commands" />'); $('#pix_pag').find('#pix_commands').append('<div id="pix_play" />').append('<div id="pix_stop" />'); if(autoAdv==true){ $('#pix_play').hide(); $('#pix_stop').show(); } else { $('#pix_stop').hide(); $('#pix_play').show(); } } if(navHover==true){ $('#pix_prev, #pix_next').animate({opacity:0},0); } function canvasLoader() { opts.onStartTransition.call(this); rad = 0; if (($.browser.msie && $.browser.version < 9) || opts.loader == 'bar') { $('#pix_canvas').css({'width':0}); } else { ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); // clear canvas } } canvasLoader(); $('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').each(function(){ $(this).css('visibility','hidden'); }); /*************************** FUNCTION nextSlide() ***************************/ function nextSlide(nav){ //funzione per il fading delle immagini elem.addClass('diaposliding'); //aggiunge una classe che mi dice che il fading 猫 in corso 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 if(nav>0){ //se siamo all'ultimo div o se ancora non ho creato nessun div var i = nav-1; } else if (vis == amountSlide-1) { var i = 0; } else { //altrimenti l'indice 猫 l'id corrent pi霉 uno, quindi il div successivo var i = vis+1; } var rows = opts.rows, cols = opts.cols, couples = 1, difference = 0, dataSlideOn, time, fx, easing, 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'); marginLeft = 0, marginTop = 0; if(isMobile()){ var dataFx = selector.eq(i).attr('data-fx'); } else { var dataFx = selector.eq(i).attr('data-mobileFx'); } if(typeof dataFx !== 'undefined' && dataFx!== false){ fx = dataFx; } else { if(isMobile()&&opts.mobileFx!=){ fx = opts.mobileFx; } else { fx = opts.fx; } if(fx=='random') { fx = shuffle(randomFx); fx = fx[0]; } else { fx = fx; if(fx.indexOf(',')>0){ fx = fx.replace(/ /g,); fx = fx.split(','); fx = shuffle(fx); fx = fx[0]; } } } if(isMobile()&&opts.mobileEasing!=){ easing = opts.mobileEasing; } else { easing = opts.easing; } dataSlideOn = selector.eq(i).attr('data-slideOn'); if(typeof dataSlideOn !== 'undefined' && dataSlideOn!== false){ slideOn = dataSlideOn; } else { if(opts.slideOn=='random'){ var slideOn = new Array('next','prev'); slideOn = shuffle(slideOn); slideOn = slideOn[0]; } else { slideOn = opts.slideOn; } } time = selector.eq(i).attr('data-time'); if(typeof time !== 'undefined' && time!== false){ time = time; } else { time = opts.time; } if(!$(elem).hasClass('diapostarted')){ fx = 'simpleFade'; slideOn = 'next'; $(elem).addClass('diapostarted') } switch(fx){ case 'simpleFade': cols = 1; rows = 1; break; case 'curtainTopLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainTopRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainBottomLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainBottomRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainSliceLeft': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'curtainSliceRight': if(opts.slicedCols == 0) { cols = opts.cols; } else { cols = opts.slicedCols; } rows = 1; break; case 'blindCurtainTopLeft': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainTopRight': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainBottomLeft': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainBottomRight': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainSliceTop': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'blindCurtainSliceBottom': if(opts.slicedRows == 0) { rows = opts.rows; } else { rows = opts.slicedRows; } cols = 1; break; case 'stampede': difference = '-'+opts.transPeriod; break; case 'mosaic': difference = opts.gridDifference; break; case 'mosaicReverse': difference = opts.gridDifference; break; case 'mosaicRandom': break; case 'mosaicSpiral': difference = opts.gridDifference; couples = 1.7; break; case 'mosaicSpiralReverse': difference = opts.gridDifference; couples = 1.7; break; case 'topLeftBottomRight': difference = opts.gridDifference; couples = 6; break; case 'bottomRightTopLeft': difference = opts.gridDifference; couples = 6; break; case 'bottomLeftTopRight': difference = opts.gridDifference; couples = 6; break; case 'topRightBottomLeft': difference = opts.gridDifference; couples = 6; break; case 'scrollLeft': cols = 1; rows = 1; break; case 'scrollRight': cols = 1; rows = 1; break; case 'scrollTop': cols = 1; rows = 1; break; case 'scrollBottom': cols = 1; rows = 1; break; case 'scrollHorz': cols = 1; rows = 1; break; } var cycle = 0; var blocks = rows*cols; //number of squares var leftScrap = w-(Math.floor(w/cols)*cols); //difference between rounded widths and total width var topScrap = h-(Math.floor(h/rows)*rows); //difference between rounded heights and total height var addLeft; //1 optional pixel to the widths var addTop; //1 optional pixel to the heights var tAppW = 0; //I need it to calculate the margin left for the widths var tAppH = 0; //I need it to calculate the margin right for the widths var arr = new Array(); var delay = new Array(); var order = new Array(); while(cycle < blocks){ arr.push(cycle); delay.push(cycle); elem.append('<div class="diapoappended" style="display:none; overflow:hidden; position:absolute; z-index:1000" />'); var tApp = $('.diapoappended:eq('+cycle+')'); tApp.find('iframe').remove(); if(fx=='scrollLeft' || fx=='scrollRight' || fx=='scrollTop' || fx=='scrollBottom' || fx=='scrollHorz'){ selector.eq(i).clone().show().appendTo(tApp); } else { if(slideOn=='next'){ selector.eq(i).clone().show().appendTo(tApp); } else { selector.eq(vis).clone().show().appendTo(tApp); } } if(cycle%cols<leftScrap){ addLeft = 1; } else { addLeft = 0; } if(cycle%cols==0){ tAppW = 0; } if(Math.floor(cycle/cols)<topScrap){ addTop = 1; } else { addTop = 0; } tApp.css({ 'height': Math.floor((h/rows)+addTop+1), 'left': tAppW, 'top': tAppH, 'width': Math.floor((w/cols)+addLeft+1) }); $('> '+opts.selector, tApp).not('#pix_canvas').not('#pix_canvas_wrap').not('#pix_next').not('#pix_prev').not('#pix_commands').css({ 'height': h, 'margin-left': '-'+tAppW+'px', 'margin-top': '-'+tAppH+'px', 'width': w }); tAppW = tAppW+tApp.width()-1; if(cycle%cols==cols-1){ tAppH = tAppH + tApp.height() - 1; } cycle++; } switch(fx){ case 'curtainTopLeft': break; case 'curtainBottomLeft': break; case 'curtainSliceLeft': break; case 'curtainTopRight': arr = arr.reverse(); break; case 'curtainBottomRight': arr = arr.reverse(); break; case 'curtainSliceRight': arr = arr.reverse(); break; case 'blindCurtainTopLeft': break; case 'blindCurtainBottomLeft': arr = arr.reverse(); break; case 'blindCurtainSliceTop': break; case 'blindCurtainTopRight': break; case 'blindCurtainBottomRight': arr = arr.reverse(); break; case 'blindCurtainSliceBottom': arr = arr.reverse(); break; case 'stampede': arr = shuffle(arr); break; case 'mosaic': break; case 'mosaicReverse': arr = arr.reverse(); break; case 'mosaicRandom': arr = shuffle(arr); break; case 'mosaicSpiral': var rows2 = rows/2, x, y, z, n=0; for (z = 0; z < rows2; z++){ y = z; for (x = z; x < cols - z - 1; x++) { order[n++] = y * cols + x; } x = cols - z - 1; for (y = z; y < rows - z - 1; y++) { order[n++] = y * cols + x; } y = rows - z - 1; for (x = cols - z - 1; x > z; x--) { order[n++] = y * cols + x; } x = z; for (y = rows - z - 1; y > z; y--) { order[n++] = y * cols + x; } } arr = order; break; case 'mosaicSpiralReverse': var rows2 = rows/2, x, y, z, n=blocks-1; for (z = 0; z < rows2; z++){ y = z; for (x = z; x < cols - z - 1; x++) { order[n--] = y * cols + x; } x = cols - z - 1; for (y = z; y < rows - z - 1; y++) { order[n--] = y * cols + x; } y = rows - z - 1; for (x = cols - z - 1; x > z; x--) { order[n--] = y * cols + x; } x = z; for (y = rows - z - 1; y > z; y--) { order[n--] = y * cols + x; } } arr = order; break; case 'topLeftBottomRight': for (var y = 0; y < rows; y++) for (var x = 0; x < cols; x++) { order.push(x + y); } delay = order; break; case 'bottomRightTopLeft': for (var y = 0; y < rows; y++) for (var x = 0; x < cols; x++) { order.push(x + y); } delay = order.reverse(); break; case 'bottomLeftTopRight': for (var y = rows; y > 0; y--) for (var x = 0; x < cols; x++) { order.push(x + y); } delay = order; break; case 'topRightBottomLeft': for (var y = 0; y < rows; y++) for (var x = cols; x > 0; x--) { order.push(x + y); } delay = order; break; } $.each(arr, function(index, value) { if(value%cols<leftScrap){ addLeft = 1; } else { addLeft = 0; } if(value%cols==0){ tAppW = 0; } if(Math.floor(value/cols)<topScrap){ addTop = 1; } else { addTop = 0; } $('.interval').text(fx); switch(fx){ case 'simpleFade': height = h; width = w; break; case 'curtainTopLeft': height = 0, width = Math.floor((w/cols)+addLeft+1), marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; break; case 'curtainTopRight': height = 0, width = Math.floor((w/cols)+addLeft+1), marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; break; case 'curtainBottomLeft': height = 0, width = Math.floor((w/cols)+addLeft+1), marginTop = Math.floor((h/rows)+addTop+1)+'px'; break; case 'curtainBottomRight': height = 0, width = Math.floor((w/cols)+addLeft+1), marginTop = Math.floor((h/rows)+addTop+1)+'px'; break; case 'curtainSliceLeft': height = 0, width = Math.floor((w/cols)+addLeft+1); if(value%2==0){ marginTop = Math.floor((h/rows)+addTop+1)+'px'; } else { marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; } break; case 'curtainSliceRight': height = 0, width = Math.floor((w/cols)+addLeft+1); if(value%2==0){ marginTop = Math.floor((h/rows)+addTop+1)+'px'; } else { marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; } break; case 'blindCurtainTopLeft': height = Math.floor((h/rows)+addTop+1), width = 0, marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; break; case 'blindCurtainTopRight': height = Math.floor((h/rows)+addTop+1), width = 0, marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; break; case 'blindCurtainBottomLeft': height = Math.floor((h/rows)+addTop+1), width = 0, marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; break; case 'blindCurtainBottomRight': height = Math.floor((h/rows)+addTop+1), width = 0, marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; break; case 'blindCurtainSliceBottom': height = Math.floor((h/rows)+addTop+1), width = 0; if(value%2==0){ marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; } else { marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; } break; case 'blindCurtainSliceTop': height = Math.floor((h/rows)+addTop+1), width = 0; if(value%2==0){ marginLeft = '-'+Math.floor((w/cols)+addLeft+1)+'px'; } else { marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; } break; case 'stampede': height = 0; width = 0; marginLeft = (w*0.2)*(((index)%cols)-(cols-(Math.floor(cols/2))))+'px'; marginTop = (h*0.2)*((Math.floor(index/cols)+1)-(rows-(Math.floor(rows/2))))+'px'; break; case 'mosaic': height = 0; width = 0; break; case 'mosaicReverse': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; marginTop = Math.floor((h/rows)+addTop+1)+'px'; break; case 'mosaicRandom': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; break; case 'mosaicSpiral': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; break; case 'mosaicSpiralReverse': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)*0.5+'px'; marginTop = Math.floor((h/rows)+addTop+1)*0.5+'px'; break; case 'topLeftBottomRight': height = 0; width = 0; break; case 'bottomRightTopLeft': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; marginTop = Math.floor((h/rows)+addTop+1)+'px'; break; case 'bottomLeftTopRight': height = 0; width = 0; marginLeft = 0; marginTop = Math.floor((h/rows)+addTop+1)+'px'; break; case 'topRightBottomLeft': height = 0; width = 0; marginLeft = Math.floor((w/cols)+addLeft+1)+'px'; marginTop = '-'+Math.floor((h/rows)+addTop+1)+'px'; break; case 'scrollRight': height = h; width = w; marginLeft = -w; break; case 'scrollLeft': height = h; width = w; marginLeft = w; break; case 'scrollTop': height = h; width = w; marginTop = h; break; case 'scrollBottom': height = h; width = w; marginTop = -h; break; case 'scrollHorz': height = h; width = w; if(vis==0 && i==amountSlide-1) { marginLeft = -w; } else if(vis<i || (vis==amountSlide-1 && i==0)) { marginLeft = w; } else { marginLeft = -w; } break; } var tApp = $('.diapoappended:eq('+value+')'); if(typeof u !== 'undefined'){ clearInterval(u); setTimeout(canvasLoader,opts.transPeriod+difference); } function diapoeased() { $(this).addClass('diapoeased'); if($('.diapoeased').length==blocks){ opts.onEnterSlide.call(this); $('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').each(function(){ $(this).css('visibility','hidden'); }); selector.eq(i).show().css('z-index','999').addClass('diapocurrent'); selector.eq(vis).css('z-index','1').removeClass('diapocurrent'); var lMoveIn = selector.eq(i).find('.fromLeft, .fromRight, .fromTop, .fromBottom, .fadeIn').length; if (lMoveIn!=0){ $('.diapocurrent .fromLeft, .diapocurrent .fromRight, .diapocurrent .fromTop, .diapocurrent .fromBottom, .diapocurrent .fadeIn').each(function(){ if($(this).attr('data-easing')!=){ var easeMove = $(this).attr('data-easing'); } else { var easeMove = easing; } var t = $(this); var wMoveIn = t.width(); var hMoveIn = t.outerHeight(); t.css('width',wMoveIn); var pos = t.position(); var left = pos.left; var top = pos.top; var tClass = t.attr('class'); var ind = t.index(); var hRel = t.parents('.pix_relativize').height(); var wRel = t.parents('.pix_relativize').width(); if(tClass.indexOf("fromLeft") != -1) { t.css({'left':'-'+wRel+'px','right':'auto'}); t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'left':pos.left},(time/lMoveIn)*0.2,easeMove); } else if(tClass.indexOf("fromRight") != -1) { t.css({'left':wRel+'px','right':'auto'}); t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'left':pos.left},(time/lMoveIn)*0.2,easeMove); } else if(tClass.indexOf("fromTop") != -1) { t.css({'top':'-'+hRel+'px','bottom':'auto'}); t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'top':pos.top},(time/lMoveIn)*0.2,easeMove); } else if(tClass.indexOf("fromBottom") != -1) { t.css({'top':hRel+'px','bottom':'auto'}); t.css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({'top':pos.top},(time/lMoveIn)*0.2,easeMove); } else if(tClass.indexOf("fadeIn") != -1) { t.animate({opacity:0},0).css('visibility','visible').delay((time/lMoveIn)*(0.1*(ind-1))).animate({opacity:1},(time/lMoveIn)*0.2,easeMove); } }); } $('.diapoappended').remove(); elem.removeClass('diaposliding'); //I remove this class, that means the effect is finished selector.eq(vis).hide(); $('#pix_canvas').animate({opacity:opts.loaderOpacity},400); u = setInterval( function(){ if (($.browser.msie && $.browser.version < 9) || opts.loader == 'bar') { if(rad<=1 && !elem.hasClass('stopped')){ rad = rad+0.01; } else if (rad<=1 && (elem.hasClass('stopped'))){ rad = rad; } else { if(!elem.hasClass('stopped')) imgFake(); clearInterval(u); $('#pix_canvas').animate({opacity:0},200,function(){ setTimeout(canvasLoader,opts.transPeriod+difference); nextSlide(); }); } canvas.css({'width':(w*rad)}); } else { radNew = rad; ctx.clearRect(0,0,opts.pieDiameter,opts.pieDiameter); ctx.globalCompositeOperation = 'destination-over'; ctx.beginPath(); ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieStroke,0,Math.PI*2,false); ctx.lineWidth = opts.pieStroke; ctx.strokeStyle = opts.loaderBgColor; ctx.stroke(); ctx.closePath(); ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); ctx.arc((opts.pieDiameter)/2, (opts.pieDiameter)/2, (opts.pieDiameter)/2-opts.pieStroke,0,Math.PI*2*radNew,false); ctx.lineWidth = opts.pieStroke-4; ctx.strokeStyle = opts.loaderColor; ctx.stroke(); ctx.closePath(); if(rad<=1 && !elem.hasClass('stopped')){ rad = rad+0.01; } else if (rad<=1 && (elem.hasClass('stopped'))){ rad = rad; } else { if(!elem.hasClass('stopped')) imgFake(); clearInterval(u); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},200,function(){ setTimeout(canvasLoader,opts.transPeriod+difference); nextSlide(); }); } } },(time)*0.01 ); } } if(pagination==true){ $('#pix_pag li').removeClass('diapocurrent'); $('#pix_pag li').eq(i).addClass('diapocurrent'); } if(fx=='scrollLeft' || fx=='scrollRight' || fx=='scrollTop' || fx=='scrollBottom' || fx=='scrollHorz'){ tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 'display' : 'block', 'height': height, 'margin-left': marginLeft, 'margin-top': marginTop, 'width': width }).animate({ 'height': Math.floor((h/rows)+addTop+1), 'margin-top' : 0, 'margin-left' : 0, 'width' : Math.floor((w/cols)+addLeft+1) },(opts.transPeriod-difference),easing,diapoeased); selector.eq(vis).delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).animate({ 'margin-left': marginLeft*(-1), 'margin-top': marginTop*(-1) },(opts.transPeriod-difference),easing,function(){ jQuery(this).css({'margin-top' : 0,'margin-left' : 0}); }); } else { if(slideOn=='next'){ tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 'display' : 'block', 'height': height, 'margin-left': marginLeft, 'margin-top': marginTop, 'width': width, 'opacity' : 0 }).animate({ 'height': Math.floor((h/rows)+addTop+1), 'margin-top' : 0, 'margin-left' : 0, 'opacity' : 1, 'width' : Math.floor((w/cols)+addLeft+1) },(opts.transPeriod-difference),easing,diapoeased); } else { selector.eq(i).show().css('z-index','999').addClass('diapocurrent'); selector.eq(vis).css('z-index','1').removeClass('diapocurrent'); tApp.delay((((opts.transPeriod+difference)/blocks)*delay[index]*couples)*0.5).css({ 'display' : 'block', 'height': Math.floor((h/rows)+addTop+1), 'margin-top' : 0, 'margin-left' : 0, 'opacity' : 1, 'width' : Math.floor((w/cols)+addLeft+1) }).animate({ 'height': height, 'margin-left': marginLeft, 'margin-top': marginTop, 'width': width, 'opacity' : 0 },(opts.transPeriod-difference),easing,diapoeased); } } if(navigation==true){ $('#pix_prev')[clickEv](function(){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($('div.diapocurrent',elem).index()); clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); if(idNum!=0){ nextSlide(idNum); } else { nextSlide(amountSlide); } } }); $('#pix_next')[clickEv](function(){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($('div.diapocurrent',elem).index()); clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); if(idNum==amountSlide-1){ nextSlide(1); } else { nextSlide(idNum+2); } } }); } if(isMobile()){ elem.live('swipeleft',function(event){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($('div.diapocurrent',elem).index()); clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); if(idNum==amountSlide-1){ nextSlide(1); } else { nextSlide(idNum+2); } } }); elem.live('swiperight',function(event){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($('div.diapocurrent',elem).index()); clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); if(idNum!=0){ nextSlide(idNum); } else { nextSlide(amountSlide); } } }); } if(pagination==true){ $('#pix_pag li')[clickEv](function(){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($(this).index()); var curNum = parseFloat($('div.diapocurrent',elem).index()); if(idNum!=curNum) { clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); nextSlide(idNum+1); } } }); } if(opts.thumbs==true){ $('#pix_pag li .pix_thumb')[clickEv](function(){ if(!elem.hasClass('diaposliding')){ var idNum = parseFloat($(this).parents('li').index()); var curNum = parseFloat($('div.diapocurrent',elem).index()); if(idNum!=curNum) { clearInterval(u); imgFake(); $('#pix_canvas, #pix_canvas_wrap').animate({opacity:0},0); canvasLoader(); nextSlide(idNum+1); } } }); } }); } } })(jQuery);