// Diapo slideshow v1.0.2 - 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 : '#ffff00', 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 : true, //true, false. It enables stop and play buttons mobileCommands : true, //true, false. It enables stop and play buttons on mobile devices pagination : true, //true, false. It enables the pagination numbers. This is the appended code: //
// //
mobilePagination : true, //true, false. It enables the pagination numbers on mobile devices thumbs : true, //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 : true, //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 : 1500, //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('
'); //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(''); 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(''); 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('
').append('
'); $('#pix_prev').animate({opacity:0},200); } elem.after('
'); //I create a div that will contain the play/stop button and the pagination buttons if(pagination==true) { $('#pix_pag').append('
    '); var li; for (li = 0; li < amountSlide; li++){ $('#pix_pag_ul').append('
  • '+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('
    '); $('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('
    '); $('#pix_pag').find('#pix_commands').append('
    ').append('
    '); 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('